웹프론트엔드에서의 이벤트 버블링 & 캡쳐링에 대한 정리

웹 페이지를 구성하는 DOM Element 노드들은 트리 모양의 계층 구조를 갖고 있으며 DOM Element 와 연결된 Javascript 내부 동작 역시 이 구조에 대한 로직이 고려되어 있다.

이벤트 버블링과 캡쳐링은 Javascript 에서 주로 사용되는 Event Delegation Pattern 을 이해하는 기본적인 개념이다.

- 이벤트 버블링(Event Bubbling) 

웹페이지 내의 한 엘리먼트에서 이벤트가 감지되었을 때, 해당 엘리먼트의 계층구조를 따라 올라가면서 Root Element 까지 이벤트가 전달되는 것을 Event Bubbling 이라 한다.

이해를 돕기 위해 다음 코드를 확인해보자.

<div class="col-sm-1" onclick="alert('c')">
    <div onclick="alert('b')">
        <div onclick="alert('a')">
            HELLO
        </div>
    </div>
</div>

위의 코드를 웹 페이지에서 확인해보면, HELLO 를 감싸고 있는 DOM 엘리먼트를 클릭하면 a - b - c 순서대로 3개의 Alert 창을 확인해볼 수 있다.

이처럼 이벤트 버블링(Bubbling)이란, 이벤트가 발생하는 가장 안쪽부터 바깥쪽, 하위 노드에서 상위노드로 이벤트가 전파(Propagation)되는 과정인 것이다.

하위 DOM Element 부터 전파되는 이벤트는 최종적으로 Document 객체까지 전달되며, 상위 Element 에서 이벤트 핸들러를 재정의해서 전파를 제어할 수 있다.

가령, 다음과 같은 코드에서 이벤트는 두번째 div 이상으로 전파되지 않는다.

<div class="col-sm-1" onclick="alert('c')">
    <div onclick="event.stopPropagation()">
        <div onclick="alert('a')">
            HELLO
        </div>
    </div>
</div>

전파되지 않는 이유는 이벤트가 발생한 target Element 의 상위 Element 에서 onclick 메서드를 재구현하는데, event.stopPropagation() 함수를 이용해서 전파를 중단했기 때문이다.

이렇게 전파를 제어하는 것을 Stop Bubbling 이라고 한다.

- 이벤트 캡쳐링(Event Capturing)

이벤트 캡쳐링은 이벤트 버블링과 반대방향으로 이벤트가 전달된다.

다음 코드를 통해 이해해보자.

<div id="parent">
    <div id="child">
        HELLO
    </div>
</div>
<script>
    var parent = document.querySelector('#parent');
    var child = document.querySelector('#child');
    parent.addEventListener('click', function(){
        alert("Parent clicked");
    },true);
    child.addEventListener('click', function(){
        alert("Child clicked");
    });
</script>

똑같이 계층 구조로 Element 들이 배치되어 있지만 이번에는 Parent 노드부터 이벤트가 전달된다.

이처럼 이벤트 캡쳐링(Event Capturing)이란, 상위노드부터 하위노드로 이벤트가 전달되는 형태를 말한다.

이 경우에 이벤트는 window 객체부터 차례로 아래 노드로 전파되며 addEventListener 의 3번째 인자로 capture 플래그를 두어 탐색 방향을 맞출 수 있다.

이벤트 캡쳐링의 경우 버블링보다는 덜 사용된다.

이벤트 버블링(Event Bubbling) 과 이벤트 캡쳐링(Event Capturing) 의 개념은 간단하지만, 이해하고 있지 않으면 은근히 프론트엔드 개발 시 삽질을 할 수 있는 부분이다.

잘 이해해두어 복잡한 UI 이벤트 처리 시에 헷갈리는 일이 없도록 하자.