이벤트 전파(event propagation)
이벤트 전파(Event Propagation)
DOM(Document Object Model) 내에서 특정 요소에 이벤트가 발생했을 때, 그 이벤트가 어떤 경로를 따라 전달되는지를 설명하는 개념이다.
이는 이벤트가 발생한 시점부터 상위 요소로 전달되는 전체 흐름을 이해하기 위한 핵심적인 메커니즘으로, 캡처링(Capturing) → 타깃(Target) → 버블링(Bubbling)의 세 단계를 거친다.
1. 캡처링(Capturing) 단계
캡처링 단계 : 이벤트가 최상위 요소(document)에서 시작하여 이벤트가 발생한 타깃 요소로 향해 내려가는 과정
이때, 상위 요소들에 이벤트 리스너가 등록되어 있고 addEventListener() 메서드의 세 번째 인자로 { capture: true } 옵션이 설정되어 있다면, 해당 이벤트 리스너는 이 단계에서 실행된다.
2. 타깃(Target) 단계
타깃 단계 : 이벤트가 실제 타깃 요소에 전달되는 단계
이 시점에 타깃 요소에 등록된 이벤트 리스너가 실행되며, 이 단계는 이벤트의 중심이 되는 구간이다. 즉, 사용자가 버튼을 클릭했다면 그 버튼 요소의 이벤트 핸들러가 이 단계에서 작동한다.
3. 버블링(Bubbling) 단계
버블링 단계는 이벤트가 타깃 요소에서 시작하여 DOM 트리의 상위 요소로 전파되는 과정을 의미한다.
버블링 원리
- 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작
- 이어서 부모 요소의 핸들러가 동작
- 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작
이를 “이벤트 위임(Event Delegation)”이라고 하며, 많은 DOM 요소에 개별적으로 핸들러를 등록하지 않아도 되어 성능상 이점을 제공한다.
🔹 이벤트 전파 제어
때로는 이벤트가 상위 요소로 전파되는 것이 원치 않을 수 있다. 이러한 경우 event.stopPropagation() 메서드를 사용하여 이벤트 전파를 특정 단계에서 중단할 수 있다. 이를 통해 예기치 않은 핸들러 실행을 방지하고, 보다 명확한 이벤트 흐름 제어가 가능하다.
✅ 정리
| 구분 | 설명 | 관련 메서드/옵션 |
|---|---|---|
| Capturing | 이벤트가 상위 요소에서 타깃 요소로 내려감 | { capture: true } |
| Target | 이벤트가 실제 발생한 요소에서 처리됨 | - |
| Bubbling | 이벤트가 타깃에서 상위 요소로 전파됨 | 기본 동작 |
| 전파 중단 | 특정 단계에서 이벤트 전파를 중단함 | event.stopPropagation() |
💡 결론
이벤트 전파는 DOM 구조에서 이벤트가 상하 관계를 따라 이동하는 과정을 정의하는 메커니즘으로, 이를 통해 복잡한 사용자 상호작용을 효율적으로 제어하고 관리할 수 있다.