[js] Event Delegation

부모 요소에 이벤트 리스터를설정하고 이벤트 버블링을 활용하여 자식 요소들에서 발생하는 이벤트를 처리하는 기업

많은 자식 요소 각각에 이벤트 리스터를 설정하지 않아도 되어 성능과 메모리 효율성을 높이는데 도움이 됨

 

* 버블링 : DOM 이벤트 흐름의 한 부분으로, 이벤트가 발생했을 때 그 이벤트가 가장 깊은 요소에서 시작하여 상위 요소로 전파되는 현상. 이를 통해 최상위 요소에 도달할 때까지 이벤트가 계층적으로 전파됨.

// parent 요소에 클릭 이벤트 리스너를 추가
// 이벤트가 parent 자식 요소에서 발생하면 이벤트가 버블링되어 parent 요소에도 전달됨

<ul id="parent">
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li class="item">Item 3</li>
</ul>

document.getElementById("parent").addEventListener("click", function (event) {
    if (event.target && event.target.matches("li.item")) {
        console.log("List item clicked: ", event.target.textContent);
    }
});


// 
// 동적으로 추가된 요소 처리
// 아래와 같이 새로운 li 요소를 추가해도 기존의 이벤트 리스너가 처리할 수 있음

let newItem = document.createElement("li");
newItem.className = "item";
newItem.textContent = "Item 4";
document.getElementById("parent").appendChild(newItem);