이벤트 위임 ✅ 성능 최적화와 실무 활용법

 

 

웹에서 이벤트를 처리할 때, 보통 요소마다 이벤트를 직접 등록합니다.
하지만 요소가 많아질수록 메모리 낭비 + 성능 저하 문제가 생깁니다.
이를 해결하는 방법이 바로 **이벤트 위임(Event Delegation)**입니다.

---

🧠 1. 이벤트 위임이란?

하위 요소에 이벤트를 직접 걸지 않고, 상위 요소에서 이벤트를 처리하는 기법

 

브라우저의 이벤트 버블링(Event Bubbling) 원리를 이용합니다.
즉, 이벤트가 발생하면 부모 요소까지 이벤트가 전파되므로,

부모에서 한 번만 이벤트를 등록해도 자식들의 이벤트를 감지할 수 있습니다.

---

📌 2. 기본 예제 – 잘못된 방식

 

document.querySelectorAll(".item").forEach(item => {
  item.addEventListener("click", () => {
    console.log("아이템 클릭!");
  });
});

• ❌ 요소가 많아질수록 이벤트 리스너도 늘어나 성능 저하
• ❌ 동적으로 추가된 .item에는 이벤트가 적용되지 않음

---

✅ 3. 이벤트 위임 방식

 

document.querySelector(".list").addEventListener("click", (e) => {
  if (e.target.classList.contains("item")) {
    console.log("아이템 클릭!");
  }
});

• 이벤트는 .list에만 등록
• 클릭된 대상이 .item인지 확인 후 처리
• 성능 최적화 + 동적 요소도 자동 처리

---

🧩 4. 실무 활용 예시

🔘 체크박스 전체 선택

 

document.querySelector(".checkbox-list").addEventListener("change", (e) => {
  if (e.target.matches(".select-all")) {
    document.querySelectorAll(".item-checkbox")
      .forEach(cb => cb.checked = e.target.checked);
  }
});

 

👉 개별 체크박스가 수십 개여도 상위 요소에서 한 번만 이벤트 등록

---

📑 동적 요소 제어 (예: Todo 리스트)

 

document.querySelector(".todo-list").addEventListener("click", (e) => {
  if (e.target.matches(".delete-btn")) {
    e.target.closest("li").remove();
  }
});

 

👉 JS로 나중에 추가된 아이템도 문제없이 삭제 가능

---

⚡ 5. 성능 최적화 효과

구분	직접 등록 방식	이벤트 위임
이벤트 리스너 개수	요소마다 등록 (수백 개 가능)	부모 1개만 등록
동적 요소 처리	❌ 수동으로 다시 등록 필요	✅ 자동 적용
메모리 사용	많음	적음
유지보수성	낮음	높음

 

---

🛠️ 6. 이벤트 위임 시 주의점

• 🎯 e.target은 이벤트가 발생한 실제 요소이므로, 정확히 필터링 필요 (.matches, .closest 활용)
• 🧩 이벤트 버블링이 일어나지 않는 이벤트도 있음 (예: blur, focus)
• ⚠️ 상위 요소에 이벤트를 너무 많이 몰아넣으면 오히려 복잡해질 수 있음

---

📝 마무리 정리

• 이벤트 위임은 이벤트 버블링을 활용한 성능 최적화 기법
• ✅ 코드 간결화, ✅ 성능 개선, ✅ 동적 요소 처리까지 가능
• 실무에서는 리스트, 테이블, 버튼 그룹, 체크박스 등에 자주 활용됩니다

👉 성능 최적화와 유지보수성을 동시에 잡는 핵심 스킬입니다! 🔥