1 분 소요

이벤트 위임(Event Delegation)은 하위 요소들의 이벤트를 공통된 상위 요소(조상)에 위임하는 방식입니다.

이 방식은 이벤트 버블링(Event Bubbling) 현상을 활용해, 존재하지 않던 요소에도 이벤트를 적용할 수 있는 장점이 있습니다.

예를 들어, <ul>에 한 번만 이벤트를 걸어도, 그 안의 <li>나 <a>에 이벤트가 동작합니다.

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

  1. 성능 최적화

    많은 요소에 각각 이벤트를 연결하는 대신 공통 부모에 한 번만 연결하면 메모리 사용이 줄어듭니다.

  2. 동적 요소 대응

    자바스크립트나 Ajax로 나중에 생성된 요소에도 이벤트가 자동 적용됩니다.

기본 예제 비교

❌ 직접 연결 방식

("ul a").on("click", function(e) {
  e.preventDefault();
  $("#text").append("직접 연결된 링크 클릭<br>");
});
  • 이 방식은 현재 있는 요소에만 적용됩니다.

✅ 이벤트 위임 방식

$("ul").on("click", "a", function(e) {
  e.preventDefault();
  $("#text").append("위임된 링크 클릭<br>");
});
  • 향후 추가될 <a> 요소에도 자동 적용됩니다.

동적 요소 예제

// 위임된 클릭 이벤트 연결
$("ul").on("click", "a", function(e) {
  e.preventDefault();
  $("#text").append("링크 클릭<br>");
});

// 버튼 클릭 시 동적 링크 추가
$("button").one("click", function() {
  $("ul").append('<li><a href="/jquery/intro">jQuery</a></li>');
});
  • .on("click", "a", fn) 구조로 자식 요소를 선택하는 것이 핵심입니다.

이벤트 전파(Event Propagation) 정리

이벤트 버블링 (기본 동작)

  • 이벤트는 가장 안쪽 요소에서 바깥 요소로 전파됩니다.
  • 예: <a> → <li> → <ul> → <body> → document

이벤트 캡처링

  • 반대 방향(밖 → 안)이지만, jQuery는 기본적으로 지원하지 않음 (버블링 방식만 사용)

이벤트 전파 제어

1. 부모로의 전파 막기 – stopPropagation()

$("ul").on("click", function() {
  alert("UL 클릭!");
});
$("ul").on("click", "a", function(e) {
  e.stopPropagation();
  alert("링크 클릭!");
});
  • 링크를 클릭해도 UL 클릭 경고는 실행되지 않습니다.

2. 기본 동작 막기 – preventDefault()

$("ul").on("click", "a", function(e) {
  e.preventDefault();
  alert("기본 동작 방지!");
});
  • 브라우저의 기본 링크 이동 동작을 막습니다.

실용 예제

체크박스 동적 처리

// 이벤트 위임 방식
$("body").on("change", ".dynamic-checkbox", function() {
  const isChecked = $(this).is(":checked");
  $("#text").html(isChecked ? "체크됨" : "체크 해제됨");
});

// 체크박스 동적 추가
$("#addCheckbox").on("click", function() {
  $("#checkboxContainer").append('<input type="checkbox" class="dynamic-checkbox">');
});

삭제 버튼 동적 처리

// 위임 방식으로 이벤트 연결
$("body").on("click", ".delete-button", function() {
  $(this).closest("li").remove();
});

// 동적 요소 추가
$("#addItem").on("click", function() {
  $("#itemList").append('<li>새 아이템 <button class="delete-button">삭제</button></li>');
});
  • .on()을 부모 요소에 연결하면 나중에 생긴 버튼도 바로 동작합니다.

질문 정리

이벤트 위임은 왜 성능이 좋은가요?

→ 수백 개의 요소에 각각 이벤트를 연결하는 대신, 부모 하나에만 연결하므로 메모리와 처리 속도 모두 유리합니다.

기존 요소와 동적 요소 모두에 이벤트를 적용하려면?

→ .on("click", "자식선택자", fn) 형식의 이벤트 위임을 사용하세요.

stopPropagation()과 preventDefault()의 차이는?

→ preventDefault()는 기본 동작 방지 (예: 링크 이동),

stopPropagation()은 이벤트가 부모로 전파되는 것을 차단합니다.

동적 요소에 .click()으로 직접 이벤트를 걸면 왜 안 되나요?

→ .click()은 현재 있는 요소에만 작동하므로, 나중에 추가된 요소에는 적용되지 않습니다. 위임 방식이 필요합니다.

카테고리:

업데이트:

댓글남기기

참고