이벤트 버블링(bubbling)과 캡처링(capturing)

이벤트 버블링 (Event Bubbling)

이벤트 버블링은 한 요소에 이벤트가 발생하면 해당 요소의 이벤트 핸들러가 실행이 되고, 부모 요소의 이벤트 핸들러도 순차적으로 실행이되는 현상을 말합니다.

 

예시 코드로 설명해보면

<form onclick="console.log('form')">
    FORM
    <div onclick="console.log('div')">
        DIV
        <p onclick="console.log('p')">P</p>
    </div>
</form>

 

만약 사용자가 P를 클릭했습니다. 간단하게 생각하면 p 라는 글씨만 표시가 될거라고 생각 할 수 있습니다.
하지만, 실제로는 아래와 같이 부모 요소의 이벤트 핸들러가 실행되는 것을 볼 수 있습니다.

 

이벤트 버블링 예시 코드 실행 결과

 

요약하면 이벤트가 자식 요소부터 시작해서 부모 요소로 거슬러 올라가며 이벤트가 발생하는 것을 이벤트 버블링(Event Bubbling)이라고 합니다.

이벤트 버블링

 

버블링 중단하기

원치 않은 이벤트 버블링을 막는 방법이 있는데, event.stopPropagation()을 이용할 수 있습니다.

코드로 예를들면, 아까와 동일한 코드에 P 태그에 stopPropagation을 추가하였습니다.

<form onclick="console.log('form')">
    FORM
    <div onclick="console.log('div')">
        DIV
        <p onclick="event.stopPropagation(); console.log('p');">P</p>
    </div>
</form>

 

stopPropagation에 의해 이벤트 버블링이 중단된 것을 확인 할 수 있습니다.

 

이벤트 버블링 중단 예시 코드 실행 결과

 

이벤트 캡처링 (Event Capturing)

이벤트 캡처링은 버블링과 반대로 부모 요소의 이벤트 핸들러가 실행이 되고, 그 아래 자식 요소의 이벤트 핸들러가 순차적으로 실행되는 것을 말합니다.

 

캡처링을 구현하려면 addEventListener의 3번째 인자로 {capture: true} 또는 true를 넣어주면 됩니다.

elem.addEventListener(..., {capture: true});
// 또는
elem.addEventListener(..., true);

 

간단한 코드로 예시를 들면

<style>
  body * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>

<form>
    FORM
  <div>
    DIV
    <p>P</p>
  </div>
</form>

<script type="text/javascript">
  for(let elem of document.querySelectorAll('*')) {
    elem.addEventListener("click", e => console.log(`캡쳐링: ${elem.tagName}`), true);
    elem.addEventListener("click", e => console.log(`버블링: ${elem.tagName}`));
  }
</script>

 

똑같이 P를 클릭했을때, HTML > BODY > FORM > DIV > P 와 같이 부모에서 자식 방향으로 캡처링이 발생합니다.

반대로 P > DIV > FORM > BODY > HTML 와 같이 자식에서 부모 방향으로 버블링이 발생합니다.

 

이벤트 캡처링 예시 코드 결과