JavaScript 이벤트 위임 완벽 가이드! 동적 요소도 한방에 관리하는 법 - 코드카인 티스토리

안녕하세요😊 코드카인 여러분!

오늘은 JavaScript의 이벤트 위임(Event Delegation) 을 알아볼 거예요!
이벤트 위임은 동적인 요소를 관리할 때 정말 유용한 기술이랍니다.
예를 들어, 동적으로 추가되는 버튼이나 리스트 아이템에 일일이 이벤트를 붙이는 번거로움 없이,
부모 요소 하나에만 이벤트를 등록해도 모든 자식 요소에서 이벤트를 감지할 수 있어요!

이제 이벤트 위임이 무엇인지, 어떻게 활용하는지 차근차근 알아볼까요? 😊

---

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

이벤트 위임(Event Delegation)이란?
부모 요소에 이벤트 리스너를 등록하고, 이벤트가 버블링(Bubbling, 이벤트 전파) 되는 특성을 활용하여
자식 요소에서 발생한 이벤트를 감지하는 기법이에요!

💡 이벤트 버블링(Bubbling) 이란?

DOM에서 이벤트가 발생하면, 그 이벤트는 자기 자신 → 부모 요소 → 최상위 요소 순으로 전파됩니다.
즉, 이벤트가 부모 요소로 올라가면서 전달되는 것을 이벤트 버블링 이라고 해요!

이 특성을 이용하면, 특정 요소가 아닌 부모 요소 하나만 감지하면
자식 요소에서 발생하는 이벤트도 쉽게 처리할 수 있습니다.

---

🚀 이벤트 위임을 활용하는 이유

✅ 1. 동적으로 추가된 요소도 감지 가능

동적으로 추가되는 버튼, 리스트 아이템 등에 개별적으로 이벤트 리스너를 등록하는 건 비효율적입니다.
이벤트 위임을 사용하면 새로 추가된 요소에도 자동으로 이벤트가 적용돼요!

✅ 2. 성능 최적화 (메모리 절약)

수많은 요소에 각각 이벤트 리스너를 붙이면 메모리 낭비가 심해지고 성능이 저하됩니다.
부모 요소에 하나의 이벤트 리스너만 두면, 메모리 사용량을 줄이고 성능을 향상시킬 수 있어요.

✅ 3. 유지보수 용이

개별 요소마다 이벤트를 할당하는 것보다, 부모 요소 하나에서 관리하면 코드가 깔끔해지고 유지보수도 쉬워집니다.

---

🛠️ 이벤트 위임 구현하기

❌ 기존 방식 (이벤트를 개별적으로 추가)

const buttons = document.querySelectorAll(".btn");

buttons.forEach(button => {
  button.addEventListener("click", function () {
    alert("버튼 클릭!");
  });
});

이 방식은 모든 버튼에 일일이 이벤트를 추가해야 하므로, 성능적으로 비효율적입니다.
게다가 새로운 버튼이 추가되면 기존 코드에서 다시 이벤트를 추가해야 합니다.

---

✅ 이벤트 위임을 사용한 방식

document.querySelector(".container").addEventListener("click", function (event) {
  if (event.target.classList.contains("btn")) {
    alert("버튼 클릭!");
  }
});

🎯 이벤트 위임 방식의 동작 원리

1. .container(부모 요소)에 이벤트 리스너를 등록합니다.
2. 클릭 이벤트가 발생하면, 이벤트 객체(event)의 target 속성을 확인합니다.
3. .btn 클래스를 가진 요소인지 확인 후, 필터링하여 실행합니다.

이 방식은 새로운 .btn 요소가 추가되더라도 자동으로 이벤트가 적용되는 장점이 있어요!

---

📌 이벤트 위임이 필요한 상황

🎈 1. 동적으로 생성되는 요소에 이벤트 적용

document.querySelector(".list").addEventListener("click", function (event) {
  if (event.target.tagName === "LI") {
    alert("리스트 아이템 클릭!");
  }
});

💡 리스트(.list)에 대한 이벤트를 부모 요소에서 처리하면, 새롭게 추가된 LI 요소도 이벤트를 감지할 수 있어요.

---

🎈 2. 많은 요소에 이벤트 리스너를 등록해야 할 때

document.querySelector(".menu").addEventListener("click", function (event) {
  if (event.target.classList.contains("menu-item")) {
    console.log("메뉴 클릭:", event.target.textContent);
  }
});

💡 여러 개의 .menu-item이 있어도, 부모 요소 .menu 하나만 이벤트 리스너를 가지면 효율적이에요!

---

🔥 이벤트 위임 활용 시 주의할 점

🚨 1. 이벤트가 버블링되지 않는 경우 (예: focus, blur)

이벤트 위임은 이벤트 버블링을 활용하는 기법입니다.
하지만 focus, blur 같은 이벤트는 버블링되지 않기 때문에 부모 요소에서 감지할 수 없어요!

document.querySelector(".input-container").addEventListener("focus", function (event) {
  console.log("Input에 포커스 됨!");
}, true); // 캡처링(Capturing) 모드 사용

💡 focus와 blur 같은 이벤트는 true 옵션을 추가해서 캡처링(Capturing) 모드로 설정해야 합니다.

---

😊 마무리하며..

오늘은 JavaScript의 이벤트 위임(Event Delegation)을 배워봤어요!
이제 동적으로 추가된 요소에도 이벤트를 쉽게 적용할 수 있겠죠? 😆

이벤트 위임은 성능 최적화뿐만 아니라 유지보수에도 큰 도움이 되는 기법이랍니다!
이제부터는 개별 요소에 이벤트를 등록하는 대신, 부모 요소 하나에 위임하는 방법을 적극 활용해 보세요!

📝 오늘 배운 핵심 정리
✔️ 이벤트 위임이란? → 부모 요소에 이벤트를 등록하여 자식 요소의 이벤트를 감지하는 기법
✔️ 이벤트 버블링이란? → 이벤트가 부모 요소로 전파되는 현상
✔️ 왜 사용할까? → 동적 요소 대응, 성능 최적화, 유지보수 용이
✔️ 주의할 점? → focus, blur 같은 이벤트는 버블링되지 않음

💡 이제 여러분도 이벤트 위임을 활용하여 더욱 효율적인 코드를 작성해 보세요! 🚀