이벤트 버블링(bubbling)과 캡처링(capturing) :: 마이구미

이 글은 버블링(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가지로 구분할 수 있다.

• 캡처링
• 버블링
• 타겟(실제 이벤트 발생 요소)

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

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

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

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

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

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

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

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

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

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

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

글에서 다룬 것들은 예제에 담겨있다.

자세한 건 CodePen 을 확인하면 된다.