캡쳐링, 버블링으로 원하는 순서대로 이벤트 핸들러가 발동되게 하기

이벤트 캡쳐링, 버블링에 관한 지식을 테스트하는 문제를 풀어보았다.

문제

버튼을 클릭했을 때 아래와 같은 순서로 콘솔에 출력되도록 코드를 수정해주세요.

1 2 3

HTML 구조

body (최상단) → section → div → button (이벤트 타겟)

현재 콘솔 창

1 4 3 2 순서로 찍힌다.

document.querySelector("body").addEventListener("click", e => {
  console.log(1)
});

document.querySelector("div").addEventListener("click", e => {
  console.log(3);
});

// 아래 코드는 수정하지 마세요.

document.querySelector("section").addEventListener("click", (e) => {
  console.log(4);
});

document.querySelector("button").addEventListener("click", (e) => {
  console.log(2);
});

---

풀이

document.querySelector("body").addEventListener("click", e => {
  console.log('eventPhase',e.eventPhase); // 1 캡쳐링 단계
  console.log(e.defaultPrevented); // false
  console.log(1)
}, true);

document.querySelector("div").addEventListener("click", e => {
  console.log('eventPhase',e.eventPhase); // 3 버블링 단계
  e.stopPropagation(); // 버블링을 막는다. 
  console.log(3);
});

// 아래 코드는 수정하지 마세요.

document.querySelector("section").addEventListener("click", (e) => {
  console.log('eventPhase',e.eventPhase); // 3 버블링 단계
  console.log(4);
});

document.querySelector("button").addEventListener("click", (e) => {
  console.log('eventPhase',e.eventPhase); // 2 타겟 단계
  console.log(2);
});

• body 에 걸려있는 이벤트 리스너의 세번째 인자로 true 를 주어 이벤트 캡쳐링이 발생하게 한다.
• body 이벤트 캡쳐링을 true 로 바꾸면, body 이벤트 핸들러가 캡쳐링 단계에서 발생하게 되면서 콘솔에 1 이 출력된다.
• 다른 이벤트 핸들러들은 디폴트 값으로 false 가 걸려있기 때문에 캡쳐링 단계가 발생하지 않는다.
• e.eventPhase 를 출력해보면 1 로 나온다. (캡쳐링 단계에서 이벤트 핸들러가 발동되었다는 것)
• div, section, button 의 이벤트 핸들러는 여전히 디폴트인 false 로 되어있으므로 캡쳐링이 발생하지 않는다.
• 이벤트 타겟인 button에서부터 버블링이 발생해 2, 3, 4 가 순서대로 콘솔에 찍힐 것이다.
• div 의 이벤트 핸들러에서 stopPropagation 으로 버블링을 막아주었으므로 3 까지만 출력되고, section 의 이벤트 핸들러는 발동되지 않는다.
• 이벤트 핸들러는 이벤트 당 한번만 발동되므로 이미 캡쳐링 단계에서 발동한 body의 이벤트 핸들러는 버블링 단계에서 다시 발동되지 않는다.
• 결과적으로 1, 2, 3 이 출력된다.

이벤트 객체가 가지고 있는 속성

참고

https://blog.sonim1.com/152