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

버블링과 캡처링 Bubbling and Capturing

버블링과 캡처링은 이벤트 전파 방식을 설명하는 용어.

 

 

 

1. 버블링(Bubbling)

이벤트가 가장 깊은 요소(최하위 요소)에서 시작하여 상위 요소로 반복되면서 핸들러가 동작하며 전파되는 방식

예시) 하위 요소에서 클릭 이벤트가 발생 → 이벤트는 해당 요소에서 시작하여 부모 요소, 그 다음 부모 요소, 더 상위 요소로 전파

 

 

2. 캡처링(Capturing)

캡처링은 버블링과는 반대로 이벤트가 가장 상위 요소에서 시작하여 해당 하위 요소로 전파되는 방식

예시) 상위 요소에서 클릭 이벤트가 발생 →  이벤트는 해당 요소에서 시작하여 하위 요소, 그 다음 하위 요소, 더 깊은 요소로 전파

좌(버블링), 우(캡처링)

 

이벤트가 발생한 요소부터 전파되는 순서가 버블링과 캡처링에서 다르며,

이를 이용하여 특정 요소에서 이벤트를 캡처하거나 버블링을 중단할 수 있음.

default로 버블링이 발생하지만, 이벤트 리스너의 세 번째 매개변수를 true로 설정하여 캡처링을 활성화할 수도 있음.

 

 

 

3. 이벤트 전파 막기

코드 작성시, 해당 요소부터 최상위 요소 까지 전파되는 것을 막고, 원하는 타깃에서만 이벤트를 작동시키고 싶다면,

이벤트 버블링을 중단시키는 메서드 event.stopPropagation 을 사용하여  이벤트가 상위 요소로 전파되는 방지 가능

하지만, 이벤트의 기본 동작은 실행되므로, event.stopPropagation 이 링크, 버튼의 기본 동작을 막는 것은 아님

 

<div id="outer">
  Outer
  <div id="inner">Inner</div>
</div>

<script>
  document.getElementById('outer').addEventListener('click', function() {
    console.log('Outer Clicked');
  });

  document.getElementById('inner').addEventListener('click', function(event) {
    console.log('Inner Clicked');
    event.stopPropagation(); // 이벤트 버블링 중단
  });
</script>

 

 

 

 

https://developer.mozilla.org/ko/docs/Web/API/Event/bubbles

https://developer.mozilla.org/ko/docs/Web/API/Event/stopPropagation