이벤트 위임(Event Delegation)

1. 이벤트 위임이란 무엇인가요?

웹사이트를 만들다 보면 페이지 안에 버튼이나 입력창 같은 여러 요소가 필요합니다.

그런데 이런 요소가 많아질수록 효율적인 이벤트 관리가 필요합니다.

이벤트 위임(Event Delegation)은 이런 문제를 해결해주는 똑똑한 방법입니다.

간단히 말해, 여러 요소마다 이벤트를 붙이는 대신 부모 요소 하나에만 이벤트를 붙이는 방법입니다.

그러면 새로 생기는 요소도 자동으로 이벤트를 적용할 수 있습니다.

2. 왜 이벤트 위임을 사용할까요?

아래 표로 이벤트 위임이 왜 좋은지 비교해볼까요?

3. 예제로 이해하기

이제 예제를 통해 더 쉽게 이해해봅시다.

아래와 같이 버튼 3개가 있는 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("클릭됨!");
  });
});

• 문제점

1. 버튼이 많아질수록 이벤트 리스너도 많이 추가되어 성능이 저하될 수 있습니다.
2. 만약 새로운 버튼이 동적으로 추가되면, 그 버튼에는 이벤트 리스너를 따로 추가해야 합니다.

이벤트 위임을 사용해 구현하기

이제 부모 요소인 #button-container 에 이벤트 리스너를 하나만 추가해보겠습니다.

document
  .getElementById("button-container")
  .addEventListener("click", function (e) {
    // 클릭된 요소가 버튼인지 확인합니다.
    if (e.target.tagName === "BUTTON") {
      console.log("클릭됨!");
    }
  });

동작 방식

• 부모 요소인 #button-container에 이벤트 리스너를 한 번만 추가합니다.
• 사용자가 버튼을 클릭하면 이벤트가 부모 요소로 전달됩니다.
• 이벤트가 발생한 요소(e.target)가 버튼인지 확인한 후, '클릭됨!' 메시지를 출력합니다.

4. 이벤트 위임의 장점 정리

• 코드가 간결해집니다.
• 여러 요소에 각각 이벤트를 붙일 필요가 없습니다.
• 동적으로 추가된 요소도 자동으로 이벤트가 적용됩니다.
• 메모리를 효율적으로 사용해 성능이 개선됩니다.