실제 이벤트가 발생한 태그가 아닌, 상위 레벨의 태그에서 이벤트를 처리하는 형태, 이벤트 버블링을 응용한다.
하위요소를 동적으로 생성하거나 삭제할 때 일일이 해당 하위요소의 이벤트를 붙여주고 떼주는 일은 번거로울 수 있다.
혹여나 하위요소에 이벤트를 붙일 때 익명함수의 형태로 붙이게 되면 같은 동작을 하는 함수임에도 불구하고 메모리 낭비가 생길 수 있다.
코딩을 할 때 이벤트 위임을 사용하는 형태로 이벤트 핸들링을 하게 되면 적어도 위의 이슈 없이 코드를 짤 수는 있다.
하지만 나는 자바스크립트 코드상에서 실제 이벤트되는 태그와 그 이벤트 핸들러를 이어줘야 된다고 생각한다.
왜냐하면 역할(책임)의 관점에서 보면 실제 이벤트되는 태그에게 그 역할이 있기 때문이다.
그리고 리액트같은 경우, 이미 이벤트 위임의 방식으로 이벤트를 처리하고 있으므로 이벤트 위임을 사용하지 않아도 된다.
리액트 17 이전까지는 document 수준으로 이벤트를 위임하지만, 그 이후는 리액트 루트수준(대개 div id=”root” 의 형태일 것이다.)으로 이벤트를 위임한다.
전체 동작
- 하위 요소의 컨테이너에 이벤트 핸들러를 붙여준다.
- 핸들러에서 이벤트 발생 태그를 확인한다.
- 원하는 태그에서 이벤트가 발생했다면 이벤트를 핸들링 한다.
HTML Snippet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 1</title>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>
<script src="./app.js"></script>
</body>
</html>js Snippet
function onClick(e) {
if (e.target.tagName === 'TD') {
alert("TD onClick Handler");
}
}
const table = document.getElementsByTagName("table");
table.item(0).addEventListener('click', onClick);
What is to give light must endure burning