Deep Dive - 40.이벤트 전파(버블링,캡쳐링)

jhplus13·2022년 5월 11일
0

Javascript

목록 보기
15/25

이벤트 전파

이벤트 전파는 3단계로 구분할 수 있음.

  1. 캡쳐링 단계(propagate up)
    : 이벤트 객체가 상위 요소에서 하위 요소 방향으로 전파

  2. 타깃 단계 : 이벤트 객체가 이벤트 타깃에 도달함.

  3. 버블링 단계(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

profile
making-dev

0개의 댓글