Frontend Development
DOM 이벤트 전파(Event Propagation) 완벽 가이드
Kun Woo Kim
2025. 5. 27. 22:22
반응형
웹 개발에서 자주 마주치는 개념 중 하나가 바로 이벤트 전파(event propagation)입니다. 이 글에서는 이벤트 전파의 원리와 실전 활용법을 쉽고 명확하게 설명합니다.
이벤트 전파란?
이벤트 전파는 DOM(Document Object Model)에서 이벤트가 발생했을 때, 그 이벤트가 어떤 경로로 전달되는지를 설명하는 개념입니다. 이 메커니즘을 이해하면, 복잡한 사용자 인터페이스에서 효율적으로 이벤트를 제어할 수 있습니다.
이벤트 전파의 3단계
이벤트 전파는 다음과 같은 세 단계로 이루어집니다:
| 단계 | 설명 |
|---|---|
| 캡처링 | 이벤트가 최상위 요소(document)에서 시작해 타깃 요소로 내려감 |
| 타겟 | 이벤트가 실제로 발생한 요소(타깃)에 도달 |
| 버블링 | 타깃 요소에서 다시 상위 요소로 이벤트가 전파되며 올라감 |
각 단계의 동작 방식
캡처링(Capturing) 단계
이벤트가 DOM 트리의 최상위 요소에서 시작해, 이벤트가 발생한 타깃 요소로 내려갑니다. 이 과정에서 상위 요소에 등록된 리스너가 실행될 수 있습니다.타겟(Target) 단계
이벤트가 실제로 발생한 요소에 도달합니다. 이때 타깃 요소에 등록된 이벤트 리스너가 실행됩니다.버블링(Bubbling) 단계
이벤트가 타깃 요소에서 다시 상위 요소로 전파되며 올라갑니다. 상위 요소에 등록된 리스너가 실행될 수 있습니다.
실생활 비유로 이해하기
이벤트 전파를 건물의 경비 시스템에 비유할 수 있습니다:
- 캡처링: 건물 입구에서 경비원이 방문자를 확인하며 각 층을 거쳐 내려갑니다.
- 타겟: 방문자가 실제로 방문할 사무실에 도착합니다.
- 버블링: 방문자가 사무실에서 나와 다시 각 층을 거쳐 건물 밖으로 나갑니다.
코드 예시: addEventListener와 전파 단계
// HTML 구조 예시
// <div id="parent">
// <button id="child">Click me</button>
// </div>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
// 캡처링 단계에서 이벤트 리스너 등록
parent.addEventListener('click', () => {
console.log('Parent - Capturing');
}, { capture: true });
// 버블링 단계에서 이벤트 리스너 등록 (기본값)
parent.addEventListener('click', () => {
console.log('Parent - Bubbling');
});
child.addEventListener('click', () => {
console.log('Child - Target');
});이벤트 전파 제어하기
- 캡처링 단계에서 처리:
addEventListener의 세 번째 인자에{ capture: true }를 전달하면 캡처링 단계에서 이벤트를 처리할 수 있습니다. - 이벤트 전파 중단:
event.stopPropagation()을 사용하면 특정 단계에서 이벤트 전파를 중단할 수 있습니다.
child.addEventListener('click', (event) => {
event.stopPropagation(); // 이후 상위 요소로 이벤트가 전파되지 않음
console.log('Child - Target & Stop Propagation');
});이벤트 전파의 활용과 주의점
- 효율적인 이벤트 위임: 상위 요소에 이벤트를 등록해 하위 요소의 이벤트를 한 번에 처리할 수 있습니다.
- 예상치 못한 동작 방지: 불필요한 이벤트 전파를 막아 의도치 않은 동작을 방지할 수 있습니다.
결론: 이벤트 전파, 왜 중요한가?
이벤트 전파는 DOM 구조에서 이벤트가 어떻게 상위와 하위 요소 간에 전달되는지를 정의하는 핵심 메커니즘입니다. 이를 이해하면 복잡한 사용자 상호작용을 효율적으로 관리할 수 있으며, 버그 없는 프론트엔드 코드를 작성하는 데 큰 도움이 됩니다.
참고 자료
반응형