이벤트 위임 (Event Delegation)

JavaScript로 화면을 구현하다보면 동적인 요소 를 다룰 일이 자주 발생한다.
아래는 할 일 목록의 리스트 항목을 클릭하면 해당 리스트 항목이 지워지는 간단한 기능이 포함된 예시이다..

See the Pen Event Delegation(1) by Dasom Cho (@ssom13) on CodePen.

위 예시에서 기존 리스트를 클릭했을 때는 리스트가 지워지지만, 새로 추가된 리스트는 클릭해도 삭제 기능이 동작하지 않는다. li에 이벤트 리스너를 추가하는 시점에 기존에 있던 3개의 리스트만 등록되고, 새롭게 동적으로 추가된 리스트는 이벤트 리스너가 등록되지 않았기 때문이다.

이런 경우 이벤트 위임패턴 을 사용하면 매우 간단하게 해결이 가능하다.

이벤트 위임

이벤트 위임(Event Delegation) 이란 동적으로 노드를 생성하고 삭제할 때 각 노드에 대해 이벤트를 추가 하지 않고, 상위 노드에서 하위 노드의 이벤트를 제어 하는 방식이다.

이벤트 위임을 적용한 예시를 확인해보자.

See the Pen Event Delegation(2) by Dasom Cho (@ssom13) on CodePen.

새로 추가된 리스트에도 기존 리스트에 적용된 삭제 기능이 잘 동작한다.
이벤트 위임을 위한 코드는 매우 간단하다. 화면의 모든 li에 이벤트 리스너를 추가하는 대신 li의 상위 요소인 ul 태그에 이벤트 리스너를 연결 하고, 하위에서 발생한 클릭 이벤트를 감지 하는 것이다.

// var lists = document.querySelectorAll('li');
// lists.forEach(function(li) {
//     li.addEventListener('click', deleteList);
// });

var lists = document.getElementById("sampleList");
lists.addEventListener('click', deleteList);

이벤트 위임이 발생하는 원리를 살펴보면, 자식 요소에서 발생한 이벤트가 부모 요소로 전파되는 이벤트 버블링 을 이용한 것을 알 수 있다.

단, 이벤트 위임을 적용할 때 주의 해야할 점이 있다.
이벤트 위임이 필요 없는 하위 요소가 있을 경우, 불필요한 이벤트가 발생할 수 있기 때문에 이 부분에 대해서는 따로 이벤트 처리를 해줘야한다.

Reference

• 이벤트 위임(Event Delegation)의 구현
• 이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지