Javascript event capturing, bubbling

DOM 이벤트는 3개의 단계로 나뉘어집니다.

1. 이벤트 캡쳐링 - 이벤트가 하위 요소로 전파되는 단계 

2. 타깃 - 이벤트가 실제 타깃 요소에 전달되는 단계

3. 이벤트 버블링  - 이벤트가 상위 요소로 전파되는 단계

 

 

위의 그림처럼 나타낼 수 있습니다.

이제 실제로 어떻게 출력되는지 보겠습니다.

const divs = document.querySelectorAll('div');

divs.forEach(div => {
  div.addEventListener(
    "click",
    function () {
      console.log(this.classList);
    },
    { capture: true }
  );
})

위와 같은 코드로 클릭시에 자신의 classList를 출력하게 하였습니다.

capture: true를 통해 캡처링을 활성화 시켰습니다(default는 false)

 

capturing: true

 

default

첫번째 사진은 캡처링을 활용한 것이고 두번째 사진은 버블링을 활용한 것입니다.

캡처링 시에는 first가 먼저 출력되고 버블링 시에는 first가 나중에 출력된 것을 확인할 수 있습니다.

 

 

캡처링을 제어하려면 addEventListener의 세번째 parameter에 true를 넘겨주거나 capture: true 객체를 넘겨주면 됩니다.

el.addEventListener('click', function(){}, {capture: true})
el.addEventListener('click', function(){}, true)

 

버블링을 더이상 하지 않길 원한다면 event.stopPropagation()을 사용하면 됩니다.

const divs = document.querySelectorAll('div');

divs.forEach(div => {
  div.addEventListener(
    "click",
    function (e) {
      e.stopPropagation()
      console.log(this.classList);
    }
  );
})

위 사진은 stopPropagation을 이용해 이벤트의 전달을 막은 것입니다. 

second만 출력한 것을 확인할 수 있습니다.

 

이러한 버블링을 이용하면 이벤트 위임을 통하여 상위 객체에서 더 적은 메모리를 가지고 동작을 제어할 수 있습니다.

핸들러의 더 적은 할당은 메모리 사용의 감소를 뜻하게 됩니다.

 

 

 

 

 

 

 

출처 : https://ko.javascript.info/bubbling-and-capturing