[Javascript] 이벤트 버블링과 캡쳐링

 

 

우리가 웹서비스를 이용할 경우 사용자와 웹이 동적으로 상호작용할 때 브라우저에서 이벤트가 발생된다. 이벤트 버블링과 캡처링은 웹 개발에서 이벤트 처리에 관련된 두 가지 중요한 개념인데, 이벤트 캡처링과 버블링은 이벤트가 DOM 트리를 통해 어떻게 전파가 되는 지 그 방식을 설명하는 데 사용된다. 이를 통해 이벤트 핸들링의 동작을 이해하고, 원하는 대로 이벤트를 처리할 수 있다.

 

1. 이벤트 버블링이란

이벤트 버블링은 웹 개발에서 이벤트 처리 메커니즘 중 하나로, 이벤트 버블링은 HTML 요소들 간에 이벤트가 발생할 때, 이벤트가 발생한 요소부터 그 부모 요소들로 이벤트가 전파되는 현상을 말한다.  이벤트가 해당 요소에서 시작하여 최상위 요소까지 흐른 후 이벤트 핸들러가 호출된다.

아래의 예시처럼 html 코드가 있다고 했을 때

<div id="parent">
    <div id="child">
        <button id="btn">Click me</button>
    </div>
</div>

여기서 버튼을 클릭하면, 클릭 이벤트는 버튼 요소에서 시작하여 상위로 이동하게 된다. 즉, 클릭한 버튼에서 이벤트가 발생한 후 상위 요소인 child, 그리고 parent로 이벤트가 전파된다. 

javascript에서는 이벤트 버블링을 이용하여 이벤트를 처리할 수 있는데, addEventListener를 사용하여 부모 요소에 이벤트 리스너를 추가하면 자식 요소에서 발생한 이벤트도 상위로 전파되어 부모 요소에서도 이벤트를 감지할 수 있다.

document.getElementById('parent').addEventListener('click', function() {
    console.log('부모 요소에서 클릭 이벤트가 발생했습니다.');
});

이러한 이벤트 버블링은 이벤트를 처리하거나 이벤트를 위임할 때 유용하게 활용될 수 있다. 그렇지만 의도하지 않은 이벤트 전파를 막기 위해 이벤트 핸들러에서 event.stopPropagation()을 호출하여 이벤트 버블링을 중단할 수도 있다.

 

2. 이벤트 캡쳐링

이벤트 캡처링은 이벤트가 DOM 트리에서 최상위 요소부터 시작하여 이벤트를 발생시킨 요소까지 해당 타겟이 어디 있는지 찾아내려 가는 과정이다.  이벤트가 트리의 상위 요소에서 하위 요소로 이동하면서 발생하는 단계이다.  이벤트가 최상위 요소에서 시작하여 해당 요소까지 흐른 후 이벤트 핸들러가 호출된다.

3. 이벤트 위임

이런 이벤트 버블링과 캡쳐링은 왜 있는 걸까? 이렇게 이벤트 전파를 통해 이벤트를 전달해주는 것을 이벤트 위임이라고 하는데, 이벤트 위임을 통해 엘리먼트 마다 일일이 이벤트 핸들러를 등록해주지 않아도 되어서 초기화가 단순해지고 메모리가 절약된다.