캡처링과 버블링을 활용하면 강력한 이벤트 핸들링 패턴인 이벤트 위임을 구현할 수 있다.
이벤트 위임은 비슷한 방식으로 여러 요소들을 다룰 때 사용한다.
요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 핸들러를 하나만 할당해도 여러 요소들을 한꺼번에 다룰 수 있다.
공통 조상에 할당한 핸들러에서 event.target을 사용하면 실제 어디서 이벤트가 발생했는지 알 수 있다. 이를 이용해 이벤트를 핸들링한다.
<html>
<body>
<div class="menu">
<button class="items">첫번째 버튼</button>
<button class="items">두번째 버튼</button>
<button class="items">세번째 버튼</button>
</div>
<script>
for (const item of document.querySelectorAll(".items")) {
item.addEventListener("click", (e) => {
alert(`${e.target.innerText}입니다.`);
});
}
</script>
</body>
</html>
만약 위의 코드처럼 for문을 통해 모든 button 요소에 addEventListener를 호출한다면 메모리 측면에서 비효율적이고, 성능이 떨어질 수 있다.
따라서 이벤트 버블링을 이용해 부모 엘리먼트에게 이벤트를 위임하는 코드를 작성한다.
<html>
<body>
<div class="menu">
<button class="items">첫번째 버튼</button>
<button class="items">두번째 버튼</button>
<button class="items">세번째 버튼</button>
</div>
<script>
const menu = document.querySelector(".menu");
menu.addEventListener("click", (e) => {
alert(`${e.target.innerText} 입니당.`);
});
</script>
</body>
</html>
이벤트 위임을 사용하여 코드를 작성하면 장점이 있다.