ㅤ
이벤트 전파(event propagation): DOM 이벤트의 흐름과 제어
이벤트 전파(Event Propagation)는 DOM에서 이벤트가 발생했을 때, 그 이벤트가 어떤 방식으로 전파되는지를 설명하는 메커니즘으로, 캡처링(Capturing), 타겟(Target), 버블링(Bubbling)의 세 단계로 나뉜다.
ㅤ
이벤트 전파의 세 단계
캡처링 단계
- 이벤트가 DOM 트리의 최상위 요소(
document
또는window
)에서 시작해서 이벤트가 발생한 요소(타겟)로 내려간다. 즉, 부모에서 자식으로 이벤트가 전달되는 과정.
- 타겟 단계
- 이벤트가 실제로 발생한 요소(타겟)에 도달하는 단계. 이 시점에서 타겟 요소에 등록된 이벤트 리스너가 실행된다.
버블링 단계
- 이 단계에서는 이벤트가 타겟 요소에서 다시 DOM 트리의 상위 요소로 전파된다. 즉, 자식에서 부모로 이벤트가 전달되는 과정.
ㅤ
예제 코드
document.getElementById("parent").addEventListener("click", () => {
console.log("Parent clicked!");
});
document.getElementById("child").addEventListener("click", () => {
console.log("Child clicked!");
});
document.getElementById("button").addEventListener("click", () => {
console.log("Button clicked!");
});
<div id="parent" style="padding: 20px; background-color: lightblue;">
Parent
<div id="child" style="padding: 20px; background-color: lightgreen;">
Child
<button id="button" style="padding: 10px;">Click Me</button>
</div>
</div>
버튼 클릭 시 콘솔 출력:
Button clicked!
Child clicked!
Parent clicked!
기본적으로 이벤트는 버블링 단계에서 전파되기 때문에 버튼을 클릭했을 때, 콘솔에 다음과 같이 메시지가 출력되는 것을 확인할 수 있다.
ㅤ
캡처링 단계에서 이벤트 처리
기본적으로 이벤트는 버블링 단계에서 처리되지만, addEventListener
의 세 번째 인자로 { capture: true }
를 전달하면 캡처링 단계에서 이벤트를 처리할 수 있다.
document.getElementById("parent").addEventListener("click", () => {
console.log("Parent clicked during capturing!");
}, { capture: true });
document.getElementById("child").addEventListener("click", () => {
console.log("Child clicked during capturing!");
}, { capture: true });
document.getElementById("button").addEventListener("click", () => {
console.log("Button clicked!");
});
버튼 클릭 시 콘솔 출력:
Parent clicked during capturing!
Child clicked during capturing!
Button clicked!
캡처링 단계에서 이벤트가 처리되었기 때문에 상위 요소의 이벤트 리스너가 먼저 실행된다는 것을 보여준다.
ㅤ
이벤트 전파 중단
event.stopPropagation()
메서드를 사용해서 이벤트 전파를 중단할 수 있다. 다음 코드는 버튼에서 발생한 이벤트가 상위 요소로 전파되지 않도록 설정한 예이다.
document.getElementById("button").addEventListener("click", (event) => {
console.log("Button clicked!");
event.stopPropagation();
});
document.getElementById("child").addEventListener("click", () => {
console.log("Child clicked!");
});
document.getElementById("parent").addEventListener("click", () => {
console.log("Parent clicked!");
});
버튼 클릭 시 콘솔 출력:
Button clicked!
콘솔 출력 시 event.stopPropagation()
으로 인해 이벤트가 더 이상 상위 요소로 전파되지 않음을 알 수 있다.
ㅤ
요약
이벤트 전파는 DOM 구조에서 이벤트가 어떻게 상위와 하위 요소 간에 전달되는지를 정의하는 메커니즘으로, 복잡한 사용자 상호작용을 효율적으로 관리할 수 있다.
이벤트는 캡처링 -> 타겟 -> 버블링 단계로 전파된다.
addEventListener
의{ capture: true }
를 활용하여 캡처링 단계에서 이벤트를 처리할 수 있다.event.stopPropagation()
을 사용해 특정 단계에서 이벤트 전파를 차단할 수 있다.
ㅤ