이벤트 위임 (Event Delegation)

이벤트 위임이란 동적으로 하위 노드를 생성하고 삭제할 때,
상위 노드가 하위 노드들의 이벤트를 직접 탐지하고 관리하는 것을 뜻한다.

코드 예제

<div class='parent'>
  
</div>

const parent = document.querySelector('.parent');

for (let i=0; i<1000; i++) {
   parent.innerHTML += `
      <button class="child">
          하이
      </button>
      <br>`;
}

javascript 실행 이후

<div class='parent'>
  <button class='child'></button>
  <button class='child'></button>
  <button class='child'></button>
  <!-- ...생략... -->
</div>

위의 예제처럼 parent라는 div에 child를 1000개 만들었다고 해보자.

child 버튼에 이벤트를 걸어주고 싶다면 class 선택자를 이용해서 1000개 전부 걸어주면 된다.

그런데 아무리 생각해봐도 굉장히 비효율적이다.

이벤트가 1000개나 생성되고 나중에 child를 전부 삭제시키면 1000개의 이벤트가 삭제되는 것이다.

이럴 때 이벤트 위임을 사용하면 좋다.

이벤트 위임 예제

구현 방식은 간단하다.

parent에서 클릭한 영역이 어느 부분인지 감지하는 이벤트를 생성하면 된다.

const parent = document.querySelector('.parent');

parent.addEventListener('click', (event) => {
    if (event.target.classList.contains('child')) {
        alert('child 감지');
    }
});

결과

'하이'버튼을 클릭 시

parent의 다른 영역을 클릭 시

후기

같은 이벤트를 수십, 수백번 할당해 주기보다는

이런식으로 이벤트를 단 하나만 이용하여 관리하는 것이 더 효율적이라는 생각이 든다.