Day 25 - Event Capture, Propagation, Bubbling and Once

이번 과제는 addEventListner로 DOM 객체에 이벤트를 추가할 때 줄 수 있는 옵션들에 대한 것이다.

Bubbling

Bubbling에 대한 이해가 필요한데, 특정 DOM 객체에서 이벤트가 발생하면 기본적으로 Bubbling이 발생한다. Bubbling이란 특정 DOM 객체에서만 이벤트가 발생하지 않고 상위 DOM 객체까지도 이벤트가 올라가며 발생하는 것이다.

간단하게 예시를 들면,

1
2
3
4
5
6
7
8
9
10
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <div>
      <div id="click"></div>
    </div>
  </body>
</html>

여기서 id가 click인 div에 클릭 이벤트를 추가해서 클릭 이벤트가 발생하면 상위 div, body, html까지 타고 올라가며 이벤트가 발생하는 것이다.

addEventListener에 옵션 걸기

addEventListener에서 추가적인 인자로 옵션을 주어 Bubbling 순서를 통제할 수 있다.

클릭 시 호출할 함수인 logText를 먼저 만들어보자.

1
2
3
4
function logText(e) {
  console.log(this.classList.value);
  e.stopPropagation(); // bubbling 금지
}

이제 div 객체에 click 이벤트를 옵션과 함께 추가한다.

1
2
3
4
5
6
div.addEventListener("click", logText, {
  // capture: true ==> down->up을 up->down으로
  capture: false,
  // unbinding: click 이벤트를 한번만 받음
  once: true,
});

capture 속성으로 bubbling의 순서를 역으로 바꿀 수 있다. 기본 설정은 false이며, true로 주면 하위에서 상위 객체로 이벤트가 전달되는 것이 반대로 상위에서 하위 객체로 타고 내려간다.

once 속성으로 click 이벤트를 단 한번만 받을 수 있다. 이 속성 true로 주면 해당 DOM 객체에서의 이벤트는 한 번밖에 실행되지 않는다.

Bubbling 금지시키기

하위 객체로든, 상위 객체로든 Bubbling이 발생하지 않게 할 수도 있다.

1
e.stopPropagation();

DOM 객체에 내장된 stopPropagation()을 호출하면 Bubbling이 발생하지 않는다. 앞에서 작성한 logText 함수로 예를 들면,

1
2
3
4
function logText(e) {
  console.log(this.classList.value);
  e.stopPropagation(); // bubbling 금지
}

이렇게 Bubbling을 통제할 수 있다.