[Js]이벤트 위임 방식

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

프론트엔드 개발을 하다 보면 버튼이나 리스트 아이템 등 여러 개의 요소에 클릭 이벤트를 걸어야 할 때가 많습니다.

이때, 각 요소마다 이벤트 리스너를 하나씩 다는 건 비효율적일 수 있어요.

바로 이럴 때 유용한 패턴이 이벤트 위임(Event Delegation) 입니다!

 

👀 이벤트 위임이란?

이벤트 위임은 하위 요소에서 발생한 이벤트를 상위 요소에서 처리하는 방식입니다.

DOM의 이벤트 버블링(bubbling) 특성을 활용하여, 하위 요소에 직접 이벤트를 달지 않고, 공통 부모 요소에 이벤트를 위임(delegate) 해서 처리하는 것이죠.

 

📦 왜 써야 할까? (장점)

1. 성능 개선

→ 수십 개의 요소에 각각 이벤트를 등록하는 대신, 단 **한 곳(부모)**에만 이벤트를 등록하면 되니 효율적입니다.

2. 동적으로 생성되는 요소에도 적용 가능

→ JavaScript로 새롭게 추가된 DOM 요소도 별도 이벤트 등록 없이 자동으로 작동합니다.

 

✅ 예제 코드

<ul id="todoList">
  <li>할 일 1</li>
  <li>할 일 2</li>
  <li>할 일 3</li>
</ul>

 

👎 (비효율적인 방식 - 각 li에 이벤트 등록)

document.querySelectorAll('#todoList li').forEach(li => {
  li.addEventListener('click', () => {
    console.log('할 일 클릭!');
  });
});

 

👍 (이벤트 위임 방식 - ul에 이벤트 등록)

document.getElementById('todoList').addEventListener('click', function (e) {
  if (e.target && e.target.nodeName === 'LI') {
    console.log('할 일 클릭!', e.target.textContent);
  }
});

 

💡 주의할 점

• 이벤트가 어디서 발생했는지 확인해야 하므로, e.target을 활용해 적절한 요소인지 판단하는 로직이 꼭 필요합니다.
• 이벤트 위임이 항상 정답은 아닙니다. 상위 요소가 너무 많거나 복잡한 경우, 버블링 관리가 까다로울 수 있어요.

 

🧠 정리

항목	설명
개념	이벤트를 하위 요소 대신 상위 요소에 등록
활용 포인트	성능 개선, 동적 요소 처리
핵심 메서드	addEventListener, event.target
주의 사항	타겟 필터링 로직 필수

 

출처 : chatGPT