[javascript] 이벤트 버블링, 캡처링

 

이벤트 버블링, 캡처링이란

해당 요소에 바인딩 된 이벤트를 실행할 때, 내가 실행시키려는 요소를 감싼 부모 요소들의 이벤트까지도 실행(전파)되는 것을 말한다.

아래 코드를 실행해보면 나는 버튼을 클릭했는데 버튼에 바인딩 된 이벤트 뿐만이 아니라 parant와 child에 바인딩 된 이벤트 까지 실행된다.

 

const parant = document.querySelector('.parant');
const child = document.querySelector('.child');
const button = document.querySelector('button');

function parantClick(e){
  alert('I am parant!')
}

function childClick(e){
  alert('I am child!')
}

function buttonClick(e){
  alert('I am button!')
}

parant.addEventListener('click',parantClick)
child.addEventListener('click',childClick)
button.addEventListener('click',buttonClick)

 

 

이때 이벤트가 전파되는 순서를 눈여겨 봐야하는데, 자식 요소부터 전파되는 것을 버블링(Bubbling), 부모 요소부터 전파되는 것을 캡처링(Capturing)이라고 한다.

 

 

기본 값은 버블링으로 위 코드를 실행하면 button -> child -> parant 순서로 진행된다.

이러한 기본 값은 addEventListner의 세번째 매개변수에서 설정할 수 있다.
작성하지 않으면 기본값이 false로 설정되고 버블링의 순서로 전파된다. 이 매개변수를 true로 바꾸면 부모 요소부터 전파된다.

기본값 false

 

parant.addEventListener('click',parantClick)
child.addEventListener('click',childClick)
button.addEventListener('click',buttonClick)

 

 

기본값 true

 

parant.addEventListener('click',parantClick, true)
child.addEventListener('click',childClick, true)
button.addEventListener('click',buttonClick, true)

 

 

 

버블링은 의도치 않은 이벤트를 발생시킬 수 있어 번거로워 질 수 있다. 물론 이러한 전파를 중단하는 방법도 존재한다.

 

event.stopPropagation()

 

const parant = document.querySelector('.parant');
const child = document.querySelector('.child');
const button = document.querySelector('button');

function parantClick(e){
  alert('I am parant!')
}

function childClick(e){
  alert('I am child!')
}

function buttonClick(e){
  alert('I am button!')
  e.stopPropagation()
}

parant.addEventListener('click',parantClick)
child.addEventListener('click',childClick)
button.addEventListener('click',buttonClick) 
//버블링 중단을 보기 위한 것으로 true 삭제

 

이벤트 안에 event.stopPropagation() 메소드를 넣으면 이벤트 객체의 메소드로 이벤트의 전파를 막는 역할을 한다.

위의 코드대로 실행하면 원하는대로 button을 눌렀을 때의 이벤트만 동작한다.