이벤트 전파(Event Propagation)
이벤트 전파란?
DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트가 DOM 트리를 통해 전파되는 것을 의미한다.
이벤트 전파 단계
이벤트 전파는 3단계로 이루어진다.
1. 캡처링 단계
이벤트가 상위 요소에서 하위 요소 방향으로 전파되는 단계를 의미한다.
2. 타깃 단계
이벤트가 이벤트 타깃에 도달하는 단계를 의미한다.
이벤트를 발생시킨 DOM 요소를 이벤트 타깃이라고 한다.
3. 버블링 단계
이벤트가 하위 요소에서 상위 요소 방향으로 전파되는 단계를 의미한다.
물속 거품(bubble)이 수면 위로 올라가는 모습에서 유래되었다.
정리하면 이벤트는 최상위 조상에서 시작해 하위 요소로 전파되고, 이벤트가 타깃 요소에 도달한 후, 다시 상위 요소로 전파된다.
이벤트 캐치
addEventListener
3번째 인수를 생략하거나 { capture: false }를 전달하면 버블링 단계의 이벤트를 캐치할 수 있고, { capture: true }를 전달하면 캡처링 단계의 이벤트를 캐치할 수 있다.
이벤트 전파 방지
stopPropagation
event 객체의 stopPropagation 메서드를 사용하면, 이벤트 전파를 막을 수 있다.
stopImmediatePropagation
이벤트 전파와 동일한 이벤트의 다른 리스너의 호출되는 것을 방지한다.
이벤트 위임(event delegation)
이벤트 위임이란?
여러 개의 하위 DOM 요소에 각각 이벤트 핸들러를 등록하는 대신 하나의 상위 DOM 요소에 이벤트 핸들러를 등록하는 방법을 의미한다.
이벤트가 하위 요소로 전파되는 버블링 현상을 이용한 방법이다.
언제 이벤트 위임을 사용할까?
많은 DOM 요소에 이벤트 핸들러를 등록하면 성능이 저하될 수 있다. 이벤트 위임을 통해 성능을 최적화할 수 있다.
이벤트 위임 예시
상위 요소에 이벤트 핸들러를 등록하기 때문에 이벤트 타깃을 검사해야 한다.
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>document.getElementById("list").addEventListener("click", (event) => {
if (event.target.tagName === "LI") {
console.log("Clicked:", event.target.textContent);
}
});