[Javascript] 이벤트 버블링(bubbling)과 캡처링(capturing) 차이점

 

 

 

아래에 코드펜 예제를 보면, 중첩된 요소에 있어 이벤트를 발생시킨다면 어떻게 될까?

 

 

See the Pen bubbling capturing by leejunghyun (@mygumi) on CodePen.

 

 

target 을 클릭하게 되면 [ target -> child -> parent -> root -> body ] 순으로 알림창을 뜨는 것을 확인할 수 있다.

보다시피 이벤트 핸들이 등록 된 중첩된 요소들이 하위에서 상위순으로 이벤트가 전파되었다.

 

위와 같이 중첩된 요소에서 이벤트가 발생할 때, HTML DOM API 의 이벤트 전파(Event Propagation) 는 두 가지 방식으로 구분된다. 이 두 가지 방식이 바로 버블링과 캡처링이다.

 

 

 

 

 

 

⊙ 버블링과 캡쳐링

---

 

• 캡처링 - window 로부터 이벤트가 발생한 요소까지 이벤트를 전파한다.
• 버블링 - 이벤트가 발생한 요소부터 window 까지 이벤트를 전파한다.

 

 

 

 

둘의 차이점은 단순히 방향이다.

하위 -> 상위냐, 상위 -> 하위냐 정도의 개념으로 보면 된다.

즉, 위의 예제의 경우는 버블링이라고 볼 수 있다.

 

WC3 에서 명시한 스펙의 그림을 보면 쉽게 이해할 수 있다.

 

 

 

 

 

 

 

 

 

 

위 흐름처럼 이벤트는 크게 3가지로 구분할 수 있다.

 

1. 캡처링

2. 버블링

3. 타겟 (실제 이벤트 발생 요소)

 

 

 

 

 

⊙ 그렇다면 캡처링과 버블링은 어떻게 제어하는가?

---

캡처링과 버블링은 이벤트를 등록할 때 정의할 수 있다.

이벤트 리스너인 addEventListener 메소드를 자세히 들여다보면 알 수 있다.

 

target.addEventListener(type, listener[, useCapture]);

 

 

 

 

 

세번째 인자인 useCapture 는 용어 그대로 캡처링 여부를 뜻한다.

default 값이 false 이기 때문에, 단순히 사용했다면 버블링을 통해 이벤트를 전파했을 것이다.

true 로 설정해주면 캡처링을 통해 이벤트를 전파한다.

 

 

target.addEventListener("click", function(){}, true);

 

 

 

 

 

 

[ * 자바스크립트 addEventListener 메서드 관련 설명 링크 * ]

 

[ JavaScript ] Event의 종류 : addEventListener, removeEventListener 메서드

 

 

 

 

 

⊙ 이벤트 전파를 원하지 않는다. 어떻게 하는가?

---

단순히 e.stopPropagation() 메소드를 사용하면 된다.

 

target.addEventListener("click", function(e){         e.stopPropagation();      });

 

 

 

 

 

 

 

[참고사이트]

https://bit.ly/35Dd0Cr