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

이벤트 버블링, 캡쳐링, 그리고 위임은 모두 HTML 문서 내에서 이벤트 처리에 관련된 다양한 전략을 설명하는 개념입니다. 이를 이해하기 위해서는 먼저 HTML 문서의 DOM 구조에 대한 이해가 필요합니다.

HTML 문서는 객체의 트리 구조로 표현됩니다. 이 트리 구조를 DOM(Document Object Model)이라고 합니다. DOM은 요소(element), 속성(attribute), 텍스트 노드(text node) 등을 포함하는 트리 구조를 제공하여 웹 페이지의 구조와 내용을 표현합니다.

1. 이벤트 버블링 (Event Bubbling)

이벤트 버블링은 이벤트가 발생한 요소에서 시작하여 DOM 트리 상위 요소로 이벤트가 전파되는 현상을 말합니다. 이벤트가 발생한 요소에서 시작되어 상위 요소로 계속해서 이벤트가 전달되므로 "버블링"이라는 용어가 사용됩니다.

예를 들어, 아래와 같은 HTML 구조가 있다고 가정해봅시다.

<div id="outer">
    <div id="inner">버블링 테스트</div>
</div>

document.getElementById("inner").addEventListener("click", function(event) {
    console.log("Inner clicked");
});
document.getElementById("outer").addEventListener("click", function(event) {
    console.log("Outer clicked");
});

위의 코드에서 "inner" 요소를 클릭하면 "Inner clicked"와 "Outer clicked"가 모두 출력됩니다. 이는 이벤트가 "inner"에서 시작하여 "outer"까지 버블링되기 때문입니다.

 

2. 이벤트 캡쳐링 (Event Capturing)

캡쳐링은 이벤트가 최상위 요소에서 시작하여 이벤트가 발생한 요소까지 DOM 트리를 따라 내려가는 현상을 말합니다. 이벤트 캡쳐링은 이벤트 버블링과는 반대 방향으로 이벤트가 전파됩니다.

위의 예제에서 캡쳐링을 사용하려면 이벤트 리스너를 아래와 같이 설정합니다.

document.getElementById("inner").addEventListener("click", function(event) {
    console.log("Inner clicked");
}, true); // 세 번째 인자에 true를 전달하여 캡쳐링을 활성화합니다.
document.getElementById("outer").addEventListener("click", function(event) {
    console.log("Outer clicked");
}, true);

위와 같이 코드를 작성하면 "Inner clicked"와 "Outer clicked"가 모두 출력되지만, 출력 순서는 캡쳐링 순서와 반대됩니다.

3. 이벤트 위임 (Event Delegation)

위임은 이벤트를 처리하기 위해 이벤트 핸들러를 직접 지정하는 대신, 상위 요소에 이벤트 핸들러를 등록하여 하위 요소에서 발생한 이벤트를 처리하는 기법을 말합니다.

예를 들어, 동적으로 생성되는 요소에 대해 이벤트를 처리해야 할 때 유용합니다. 이 경우에는 이벤트를 하위 요소에 하나씩 지정하는 것이 아니라 상위 요소에 이벤트 핸들러를 등록하여 해당 이벤트를 처리할 수 있습니다. 이를 통해 성능을 향상시킬 수 있습니다.

<ul id="myList">
    <li>항목 1</li>
    <li>항목 2</li>
    <li>항목 3</li>
</ul>

document.getElementById("myList").addEventListener("click", function(event) {
    if (event.target.tagName === "LI") {
        console.log("항목 클릭됨:", event.target.textContent);
    }
});

위의 코드에서는 ul 요소에 이벤트 핸들러를 등록하여 해당 ul 요소의 자식 요소인 li 요소들의 클릭 이벤트를 처리합니다. 이렇게 하면 새로운 li 요소가 동적으로 추가되더라도 각각의 li 요소에 대해 이벤트 핸들러를 지정할 필요가 없습니다. 상위 요소에서 이벤트를 캐치하여 처리할 수 있기 때문입니다.