• 이벤트 버블링(bubbling)과 캡처링(capturing) :: 마이구미
    HTML, CSS 2018. 4. 29. 01:14

    이 글은 버블링(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 을 확인하면 된다.

    댓글 0

Designed by Tistory.