출처: https://mygumi.tistory.com/315 [마이구미의 HelloWorld:티스토리]
중첩된 요소에 있어, 이벤트를 발생시킨다면 어떻게 될까?다음 예제를 확인해보자.
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();
});
