이벤트 전파
이벤트 전파는 3단계로 구분할 수 있음.
-
캡쳐링 단계(propagate up)
: 이벤트 객체가 상위 요소에서 하위 요소 방향으로 전파 -
타깃 단계 : 이벤트 객체가 이벤트 타깃에 도달함.
-
버블링 단계(propagate down)
: 이벤트 객체가 하위 요소에서 상위 요소 방향으로 전파
코드예제
<body>
<ul id="fruits">
<li id="apple">Apple</li>
<li id="banana">Banana</li>
<li id="orange">Orange</li>
</ul>
<script>
const Html = document.documentElement;
const Body = document.body;
const ulEl = document.querySelector('#fruits');
const bananaEl = document.querySelector('#banana');
Html.addEventListener('click', () => console.log('Html'));
Body.addEventListener('click', () => console.log('Body'));
ulEl.addEventListener('click', () => console.log('ul'));
bananaEl.addEventListener('click', () => console.log('banana'));
</script>
</body>🔆 banana li 클릭시 이벤트 전파
1.캡쳐링 : html → body → ul → banana li
2.타깃 : 이벤트 객체가 banana li 에 도달함
3.버블링 : banana li → ul → body → html
※ target vs currentTarget
- target : 이벤트를 발생시킨 Dom요소 (즉, banana li요소)
- currentTarget : 이벤트가 현재 발생하고 있는 Dom요소 (html, body, ul, li 요소)
🔆 banana li 클릭시 이벤트 발생 결과
0.클릭시 : 1) 클릭 이벤트 객체 생성됨. 2) li가 이벤트 타깃이 됨.
1.캡쳐링 : 이벤트 캐치되지 않고 지나감
2.타깃 : target과 curentTarget이 같아지는 구간, 이벤트 발생
3.버블링 : html까지 올라가면서 ul, body, html에 걸린 이벤트 발생함.
→ 코드 실행 결과
banana ul Body Html
🔆 addEventListener 메서드로 등록한 이벤트 핸들러는, "캡처링 단계에서" 이벤트 캐치 할지? "버블링 단계에서" 이벤트 캐치 할지? 선택할 수 있음
addEventListener(type, listener, useCapture); 3번째 인자에
-
false , 생략시 (기본값) : 버블링 단계 때 이벤트 캐치함
- 이벤트 전파 방향이 : 타깃 → 버블링 순으로 -
true면 : 캡쳐링 단계 때 이벤트 캐치함
- 이벤트 전파 방향이 : 캡처링 → 타깃 순으로
예시)
만약 Body요소의 addEventListener메서드의 3번째 인자로 true를 주면,
Body는 버블링 단계때 이벤트가 발생하는게 아니라
캡쳐링 단계때 이벤트가 발생되게 됨.
Html.addEventListener('click', () => console.log('Html'));
Body.addEventListener('click', () => console.log('Body'),true); // 바꿈!
ulEl.addEventListener('click', () => console.log('ul'));
bananaEl.addEventListener('click', () => console.log('banana')); → 실행 결과
Body banana ul Html
