[JavaScript] 이벤트 버블링, 캡쳐링, 위임

HyeJean·2024년 3월 13일

목록 보기

7/13

🔍 이벤트 버블링, 캡쳐링, 위임

이벤트 등록 : addEventListener
이벤트 제거 : removeEventListener

🤔 이벤트 버블링(Bubbling)

자바스크립트의 이벤트 버블링은 이벤트가 발생한 요소에서 상위 요소로 이벤트가 전파되는 메커니즘이다. 이벤트 버블링은 DOM 트리 구조에서 이벤트가 발생한 요소를 포함한 상위 요소들을 거슬러 올라가며 각 요소에서 등록된 이벤트 핸들러를 호출한다.

<div id="outer">
   <div id="inner">
       <button id="btn">Click me</button>
   </div>
</div>

document.getElementById('outer').addEventListener('click', function() {
    console.log('Outer div clicked');
});

document.getElementById('inner').addEventListener('click', function() {
    console.log('Inner div clicked');
});

document.getElementById('btn').addEventListener('click', function() {
    console.log('Button clicked');
});

버튼을 클릭하면 이벤트는 버튼에서부터 시작해서 상위로 전파된다.
버튼 -> 내부 div -> 외부 div 순서대로 이벤트가 전파되면서 각 요소에 할당된 이벤트 핸들러가 실행된다.

three 요소를 클릭하면 클릭 이벤트가 three-> two-> one 순서로 전파된다. 위 그림의 색을 보면 이해가 쉽다. three의 초록색은 two의 빨간색과 one의 파란색 영역에 겹쳐있기 때문에 초록색을 눌러도 빨간색과 파란색에도 전파되는 것이다.

🤔 이벤트 캡처링(Capturing)

이벤트 캡처링(Event Capturing)은 이벤트가 발생한 요소에서 시작하여 DOM 트리의 상위 요소로 이벤트가 전파되는 방식이다. 이벤트 캡처링은 이벤트 버블링과는 반대로, 이벤트가 상위 요소에서 하위 요소로 전파된다.

캡처링 단계(Capture phase): 이벤트가 발생한 요소에서 시작하여 상위 요소로 차례대로 이벤트가 전파된다.
타겟 단계(Target phase): 이벤트가 발생한 요소에 대한 이벤트 핸들러가 실행된다.
버블링 단계(Bubbling phase): 이벤트가 발생한 요소에서 시작하여 하위 요소로 차례대로 이벤트가 전파된다.

이벤트 캡처링은 이벤트 핸들러를 등록할 때 이벤트 캡처링 단계에서 이벤트를 처리하도록 설정할 수 있다. addEventListener() 메서드의 세 번째 매개변수로 {capture: true}를 전달하면 된다.

<div id="outer">
   <div id="inner">
       <button id="btn">Click me</button>
   </div>
</div>

document.getElementById('outer').addEventListener('click', function() {
    console.log('Outer div clicked');
}, true); 

document.getElementById('inner').addEventListener('click', function() {
    console.log('Inner div clicked');
}, true);

document.getElementById('btn').addEventListener('click', function() {
    console.log('Button clicked');
}, true);

위 버블링 예제와는 반대로 Outer -> Inner -> Button 순으로 전파된다.

🤔 이벤트 위임(Delegation)

이벤트 위임(Event Delegation)은 여러 하위 요소에 대한 이벤트 핸들러를 하나의 상위 요소에 등록하여 처리하는 것이다. 다수의 하위 요소에 이벤트를 등록하는 것보다 코드를 효율적으로 관리할 수 있다.

부모 요소에 이벤트 핸들러 등록
: 이벤트를 처리하고자 하는 자식 요소가 아닌 부모 요소에 이벤트 핸들러를 등록
이벤트가 버블링되는 원리 이용
: 이벤트가 자식 요소에서 발생하면, 이벤트는 상위로 버블링되어 부모 요소에 도달
이벤트 객체를 이용해 대상 요소 식별
: 부모 요소에서 발생한 이벤트 핸들러에서 이벤트 객체를 통해 어떤 자식 요소에서 이벤트가 발생했는지 확인하고 처리

<ul id="parentList">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

document.getElementById('parentList').addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('Clicked on item:', event.target.textContent);
    }
});

위의 코드에서 <ul>에 클릭 이벤트를 등록했고, 클릭한 요소가 <li>인지를 이벤트 객체의 target 속성을 통해 확인한다. 새로운 <li> 요소가 추가되더라도 부모인 <ul>에 등록된 이벤트 핸들러가 적용되기 때문에 각 <li>에 이벤트 핸들러를 등록하는 것보다 더 효율적이다.

* event.stopPropagation()

event.stopPropagation()은 자바스크립트의 이벤트 핸들러 내에서 사용되는 메서드로, 버블링은 막아주지만, 다른 핸들러 동작은 막지 못한다. event.stopImmediatePropagation() 메서드는 호출된 이후에 이벤트가 상위 요소로 전파되는 것을 막으며, 현재 요소에 등록된 다른 이벤트 핸들러의 실행도 막는다. 이벤트 핸들러 내에서 stopImmediatePropagation() 메서드가 호출되면 이후에 등록된 다른 이벤트 핸들러들은 실행되지 않는다.

아무래도 흐름을 막는 것이기 때문에 사용을 지양하는 것이 좋다.