jQuery 이벤트 위임과 동적 요소 처리

🧩 이벤트 위임과 동적 요소 처리

일반적으로 jQuery에서 이벤트를 바인딩할 때는 DOM 요소가 존재한 이후에 이벤트를 연결합니다. 하지만 AJAX나 JavaScript로 동적으로 생성된 요소에는 기본적인 이벤트 바인딩 방식이 적용되지 않습니다.

📍 문제 상황

예를 들어, 아래 버튼은 페이지 로드 후 JavaScript로 동적으로 생성됩니다.

// 버튼 추가
$("#container").append("<button class='btn'>Click Me</button>");

// 이벤트 연결 (잘 작동하지 않음)
$(".btn").on("click", function() {
  alert("Clicked!");
});
  

위 코드는 작동하지 않습니다. 왜냐하면 `.btn` 버튼이 이벤트 바인딩 시점에는 DOM에 존재하지 않기 때문입니다.

✅ 해결책: 이벤트 위임

이벤트 위임이란 상위 요소에 이벤트를 바인딩하고, 하위 요소에서 이벤트가 발생하면 이를 감지하여 처리하는 방식입니다.

// 동작하는 방식 (이벤트 위임 사용)
$("#container").on("click", ".btn", function() {
  alert("Clicked!");
});
  

이 코드는 동적으로 생성된 `.btn` 요소에도 정상적으로 이벤트가 작동합니다. 이유는 `#container`는 페이지에 처음부터 존재하므로 이벤트를 연결할 수 있기 때문입니다.

🧠 이벤트 위임의 원리

• 이벤트는 버블링을 통해 상위 요소로 전파됩니다.
• 상위 요소(`.container`)에 이벤트를 연결하고, 이벤트 대상이 특정 자식 요소(`.btn`)인지 확인합니다.
• 따라서, 동적으로 추가된 `.btn`도 이벤트 대상이 될 수 있습니다.

📌 실전 예제: 동적 리스트에 삭제 버튼

<div id="list"></div>
<button id="add">Add Item</button>

<script>
  $("#add").on("click", function() {
    $("#list").append("<div class='item'>Item <button class='delete'>X</button></div>");
  });

  // 이벤트 위임으로 삭제 처리
  $("#list").on("click", ".delete", function() {
    $(this).parent().remove();
  });
</script>
  

위 예제에서는 "Add Item" 버튼을 눌러 생성한 `.item` 요소에 `.delete` 버튼이 포함되어 있고, 해당 버튼 클릭 시 해당 항목이 삭제됩니다. 이 역시 이벤트 위임이 없으면 작동하지 않습니다.

⚠️ 주의할 점

• 이벤트 위임을 사용할 때는 가능한 가까운 상위 요소에 바인딩하세요. 너무 상위 요소(body 등)에 연결하면 성능에 영향을 줄 수 있습니다.
• 이벤트 타입에 따라 위임이 안 되는 경우도 있습니다 (예: focus, blur는 위임이 되지 않음 → focusin, focusout 사용 필요).

📎 요약

• 동적 요소는 직접 이벤트 바인딩이 되지 않음
• 이벤트 위임을 사용하면 기존 DOM을 통해 동적 요소 이벤트도 처리 가능
• 상위 요소에 이벤트를 등록하고, 하위 요소를 조건으로 필터링
• focus/blur 등 일부 이벤트는 위임이 불가능하므로 주의