이벤트 위임 ( Event Delegation )

Mintaek·2023년 10월 31일

JavaScript

목록 보기

7/8

이벤트 위임

이벤트 버블링을 활용하여 상위 요소에만 이벤트 리스너를 등록하는 기법. 이 기법을 적용하면 메모리 사용량이 감소하며 코드를 더 간결하게 구현할 수 있다.

구현

부모 요소에 이벤트 핸들러를 연결.
이벤트 버블링을 활용하여 하위 요소에서 상위 요소로 이벤트가 전파될 때, 부모 요소에서 해당 이벤트를 감지.
부모 요소에서 어떤 자식 요소가 실제로 이벤트를 발생시켰는지 확인하고, 그에 따라 필요한 동작을 수행.

예제

HTML

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

javascript

// 부모 요소인 <ul>에 클릭 이벤트 핸들러를 연결
document.getElementById("myList").addEventListener("click", function(event) {
  // 이벤트가 어떤 요소에서 발생했는지 확인한다 event.target
  if (event.target.tagName === "LI") {
    // <li> 요소를 클릭했을 때만 이 코드가 실행된다
    console.log("클릭된 항목: " + event.target.textContent);
  }
});

위 예제에서 클릭 이벤트는 <ul> 요소에 연결되어 있으며, 클릭된 요소가 <li>인 경우에만 이벤트 핸들러가 동작한다. 이렇게 하면 새로운 항목을 추가하거나 삭제하는 경우에도 코드를 수정할 필요가 없고, 모든 항목에 대한 클릭 이벤트를 처리할 수 있다.

이점

함수가 적어진다. 즉, 메모리 사용량이 감소한다.
동적으로 요소를 추가하거나 제거할 때 유용며, 코드의 성능과 가독성을 향상시키는데 도움이 된다.
이벤트 처리 로직이 중앙집중화되어 있기 때문에, 코드를 유지보수하거나 수정할 때 훨씬 편리하다.

단점

이벤트 위임을 사용하려면 이벤트가 반드시 버블링 되어야 한다. 하지만 몇몇 이벤트는 버블링 되지 않는다. 그리고 낮은 레벨에 할당한 핸들러엔 event.stopPropagation()를 쓸 수 없다.
컨테이너 수준에 할당된 핸들러가 응답할 필요가 있는 이벤트이든 아니든 상관없이 모든 하위 컨테이너에서 발생하는 이벤트에 응답해야 하므로 CPU 작업 부하가 늘어날 수 있지만 무시할만한 수준이므로 잘 고려하지 않는다.