- 이벤트는 한 요소에서만 발생하는 것이 아니라, DOM 트리 구조를 따라 전파됨
- 전파에는 3단계가 있음:
이벤트 전파 3단계
| 단계 |
설명 |
방향 |
| 캡처링(Capturing) |
최상위 요소(document)부터 이벤트 대상까지 내려가며 전파 |
위 → 아래 |
| 타겟(Target) |
이벤트가 실제 발생한 대상 요소에서 실행 |
- |
| 버블링(Bubbling) |
타겟에서 다시 상위 요소로 올라가며 전파 |
아래 → 위 |
그림 예시
코드 예시
<div id="outer">
<div id="inner">
클릭하세요
</div>
</div>
document.getElementById('outer').addEventListener('click', () => {
alert('Outer - Capturing');
}, true); // 캡처링 단계
document.getElementById('inner').addEventListener('click', () => {
alert('Inner - Bubbling');
}, false); // 버블링 단계 (기본값)
true를 설정하면 Capturing 단계에서 이벤트 발생false 또는 생략 시 기본값인 Bubbling 단계에서 발생
이벤트 전파 제어
| 메서드 |
설명 |
event.stopPropagation() |
상위 요소로의 이벤트 전파 중단 |
event.preventDefault() |
기본 동작(예: 링크 이동, 폼 제출) 차단 |