[jQuery] 이벤트 위임과 버블링

젼이·2025년 2월 8일

jquery

jQuery 정복하기

목록 보기

6/6

1. 이벤트 위임(Event Delegation)이란?

이벤트 위임은 부모 요소에 이벤트 리스너를 등록하고, 자식 요소에서 발생한 이벤트를 부모가 감지하여 처리하는 방식이다.

✅ 모든 자식 요소에 개별적으로 이벤트를 등록할 필요 없음
✅ 동적으로 추가된 요소에도 이벤트 적용 가능
✅ 메모리 절약 및 성능 최적화 가능

2. 이벤트 버블링(Event Bubbling)이란?

이벤트 버블링은 이벤트가 발생한 요소에서 부모 요소로 전파되는 현상이다.

✅ 하위 요소에서 발생한 이벤트가 상위 요소로 전달됨
✅ 부모 요소에서 이벤트를 감지하여 자식 요소의 이벤트를 처리할 수 있음

이벤트 버블링 과정

<div id="parent">
  <button id="child">클릭하세요</button>
</div>

✔ 버튼 클릭 시 이벤트가 아래 순서대로 전달됨:

#child (버튼 요소)에서 클릭 이벤트 발생
#parent (부모 요소)로 이벤트 전파
<body> -> <html> -> document까지 전파됨

➡ 이벤트가 부모 요소로 전달되기 때문에, 부모 요소에서 이벤트를 감지하여 처리 가능!

3. 이벤트 위임의 필요성

기존 방법에서는 모든 자식 요소에 개별적으로 이벤트를 등록해야 한다.

잘못된 예제 (모든 요소에 개별 등록)

$(document).ready(function() {
  	$("li").on("click", function() {
      	$(this).toggleClass("highlight");
    });
});

문제점: - 새로운 `

` 항목이 추가되면 클릭 이벤트가 작동하지 않음 - 이벤트 리스너를 요소마다 등록해야 하므로 비효율적

해결 방법 -> 이벤트 위임 사용!

4. 이벤트 위임을 활용한 리스트 클릭 이벤트

예제: 리스트 항목을 클릭하면 강조 표시

<ul id="myList">
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
  <li>항목 4</li>
</ul>
<button id="addItem">항목 추가</button>

<style>
  	.highlight { background-color: yellow; }
</style>

<script>
  	$(document).ready(function() {
  		// 이벤트 위임 사용 (부모 요소에 이벤트 등록)
  		$("#myList").on("click", "li", function() { // 클릭한 요소가 "li"일 경우 실행
  			$(this).toggleClass('highlight")l // 클릭한 항목 강조
  		});
  
  		// 동적으로 새로운 항목 추가
  		$("#addItem").on("click", function() {
  $("#myList").append("<li>새로운 항목</li>");
  		});
  	});
</script>

기존 및 새롭게 추가된 <li> 요소도 클릭 이벤트가 정상 동작
부모 요소(#myList)에 이벤트를 등록했기 때문에 이벤트 위임이 적용됨

--- ## 5. 이벤트 버블링과 전파 차단

이벤트가 부모 요소로 전달되면 원하지 않는 이벤트가 실행될 수도 있음
-> event.stopPropagation()을 사용하면 버블링을 차단 가능

예제: 버튼 클릭 시 부모의 클릭 이벤트 차단

<div id="parent">
  	<button id="child">버튼 클릭</button>
<div>
  
<script>
  	$(document).ready(function() {
  		$("#parent").on("click", function() {
  			alert("부모 요소가 클릭되었습니다.");
  		});
  		
  		$("#child").on("click", function(event) {
  			event.stopPropagation(); // 부모 요소로 이벤트 전달 차단
  			alert("버튼이 클릭 되었습니다.");
  		});
  	});
</script>

버튼 클릭 시 "버튼이 클릭되었습니다!"만 실행되고, 부모의 "부모 요소가 클릭되었습니다."는 실행되지 않음

6. 이벤트 위임 vs 기존 이벤트 등록 방식 비교

구분	기존 이벤트 등록	이벤트 위임
적용 방법	각 요소에 개별 이벤트 등록	부모 요소에 이벤트 등록 후 하위 요소 감지
동적 요소 처리	새로 추가된 요소에는 이벤트 적용 불가	새로 추가된 요소에도 적용 가능
메모리 사용	이벤트 핸들러 개수만큼 메모리 사용 증가	하나의 핸들러만 사용하여 메모리 절약
성능	요소가 많을수록 성능 저하	성능 최적화 가능

on() 메서드를 사용한 이벤트 위임이 훨씬 더 효율적

7. 이벤트 위임과 버블링 활용 예제

예제: 리스트에서 클릭한 항목을 삭제

<ul id="itemList">
  <li>아이템 1 <button class="deleteBtn">삭제</button></li>
  <li>아이템 2 <button class="deleteBtn">삭제</button></li>
  <li>아이템 3 <button class="deleteBtn">삭제</button></li>
</ul>
<button id="addItem">아이템 추가</button>

<script>
  	$(document).ready(function() {
  		// 부모 요소에 이벤트 위임
  		$("#itemList").on("click", ".deleteBtn", function() {
  			$(this).parent().remove(); // 클릭한 버튼의 부모 요소 삭제
  		});
  
  		// 동적으로 새로운 항목 추가
  		$("#addItem").on("click", function() {
  $("#itemList").append('<li>새 아이템<button class="deleteBtn">삭제</button></li>');
  		});
  	});
</script>