이벤트 위임(Event Delegation)

웹사이트에서 동적으로 많은 요소가 추가되거나 제거되는 대규모 웹 애플리케이션에서 효율적인 이벤트 관리 방법이 필요합니다.

이 때 큰 도움을 주는 개념이 바로 이벤트 위임(Event Delegation)입니다.

이벤트 위임(Event Delegation)이란?

이벤트 위임은 하위 요소 각각에 이벤트 리스너를 직접 추가하는 대신, 공통 상위 요소에 하나의 이벤트 리스너를 추가하여 여러 하위 요소의 이벤트를 관리하는 방법입니다.

이 방법을 사용함으로써, 이벤트 리스너를 각 요소에 개별적으로 추가할 필요 없이, 하나의 리스너만으로도 여러 요소의 이벤트를 효율적으로 관리할 수 있습니다.

왜 이벤트 위임을 사용하나요?

이벤트 위임 방법을 사용하는 이유에는 여러 가지가 있습니다. 아래 표를 보면 그 이유를 명확하게 이해할 수 있습니다.

이벤트 위임 사용 예시

먼저, 세 개의 버튼이 포함된 간단한 HTML 구조를 살펴보겠습니다.

HTML 구조

<div id="button-container">
  <button>버튼 1</button>
  <button>버튼 2</button>
  <button>버튼 3</button>
</div>

위와 같이 여러 개의 버튼이 있는 상황을 가정해 보겠습니다. 여기서 각 버튼을 클릭했을 때, '클릭됨!'이라고 콘솔에 출력되게 만들고 싶다고 가정합시다.

이벤트 위임을 사용하지 않는 경우

각 버튼마다 개별적으로 이벤트 리스너를 추가하는 코드는 다음과 같습니다.

document.querySelectorAll('button').forEach(button => {
  button.addEventListener('click', function() {
    console.log('클릭됨!');
  });
});

이벤트 위임을 사용하는 경우

상위 요소인 #button-container에 이벤트 리스너를 추가하는 코드입니다.

document.getElementById('button-container').addEventListener('click', function(e) {
  
  // 이벤트가 발생된 요소가 button인 경우에만 동작
  if (e.target.tagName === 'BUTTON') {
    console.log('클릭됨!');
  }
});

이 코드는 #button-container에 'click' 이벤트 리스너를 추가합니다.

클릭 이벤트가 발생하면, 이벤트 타깃의 태그 이름이 'BUTTON'인지 확인합니다.

만약 그렇다면, '클릭됨!'을 콘솔에 출력합니다. 이 방법은 리스너를 한 번만 추가하므로, 많은 수의 버튼이 있어도 효율적으로 이벤트를 관리할 수 있습니다.