자바스크립트 Bubbling

이번 포스트는 JavaScript event Bubbling에 대한 내용입니다. 

bubbling

JavaScript Bubbling

브라우저에서 JavaScript 이벤트는 두 가지 단계로 이벤트 리스너를 실행시킵니다. 첫 번째가 버블링(bubbling) 2 번째가 캡처링(capturing)입니다. 버블링은 내부에서 외부로 이동하고, 캡처링 단계는 외부에서 내부로 이동합니다. 기본적으로 addEventListener로 추가된 모든 이벤트 리스너는 버블링으로 동작합니다. 

bubbling

HTML 코드

<div id ='container'>
  <button>Click</button>
</div>

JavaScript 코드

div와 button에 eventListener click이벤트를 추가하였습니다. 

const div = document.querySelector('div');
const button = document.querySelector('button');

div.addEventListener('click', event =>{
  console.log('this is div');
  console.log(event);
});

button.addEventListener('click', event =>{
  console.log('this is button');
  console.log(event);
});

button을 클릭하면 보이는 결과:

this is button

MouseEvent {}

this is div

MouseEvent {}

브라우저가 내부에서 바깥쪽으로 리스너가 등록되어 있는지 확인합니다. 이벤트가 발생한 element부터 모든 조상 element까지 보면서 event 리스너가 있으면 실행합니다. 

---

stopPropagation

만약에 위의 예제에서 button의 클릭 이벤트가 전달되는 것을 막고 싶다면 stopPropagation을 사용하면 됩니다. 

button.addEventListener('click', event =>{
  event.stopPropagation();
  console.log('this is button');
  console.log(event);
});

stopPropagation은 조상 element에 있는 이벤트 리스너를 실행하지 않게 합니다. 그래서 이 경우에는 버튼을 클릭했을 때 this is div가 출력되지 않습니다.