Event Bubbling & Capturing & Delegation

사전 설명

• event.target : target은 이벤트가 발생한 요소를 가리킨다. (최하위 요소)
• event.currentTarget : currentTarget은 이벤트 핸들러가 연결된 요소를 참조한다.

Event Bubbling

특정 요소에서 이벤트가 발생하였을 때 해당 이벤트가 더 상위의 요소들로 전달되어 가는 특성을 의미하고, 최상위 요소까지 이벤트가 전파된다.

Example

📌 이벤트가 모든 div가 아닌 특정  div에만 달려있다면 Bubbling을 확인할 수 없다.

<div class="one">
  <div class="two">
    <div class="three">
    </div>
  </div>
</div>

const divs = document.querySelectorAll("div")
divs.forEach((div) => div.addEventListener("click", printEvent))

function printEvent(event) {
	console.log(event.currentTarget.className)	
}

// three 클래스를 가진 div를 클릭했을 때 결과이다.
// console.log - three => two => one

Event Capturing

이벤트 버블링과 반대 방향인 상위 요소에서부터 하위 요소로 진행되는 이벤트 전파 방식이고, capture:true를 설정해야 반대 방향으로 탐색한다.

Example (버블링 예제에서 capture만 true로 바꾼것이다.)

divs.forEact((div) => {
  div.addEventListener("click", printEvent, {
  	capture: true // default는 false이다.
  })
})

// three 클래스를 가진 div를 클릭했을 때 결과이다.
// console.log - one => two => three

Event Delegation

하위 요소에 각각 이벤트를 붙이지 않고, 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식으로, 이벤트 버블링으로 하위에서 발생한 클릭 이벤트를 감지할 수 있다.

Example

<ul class="itemList">
  <li>
  	<input type="checkbox" id="item1" />
    <label for="itme1">아이템 1</label>
  </li>
  <li>
  	<input type="checkbox" id="item2" />
    <label for="itme2">아이템 2</label>
  </li>
</ul>

const itemList = document.querySelector(".itemList")

// 하위 요소에 있는 input, label을 클릭하여도 이벤트가 감지되어 실행된다.
itemList.addEventListener("click", (event) => alert("clicked"))

Reference

캡틴 판교님 - 이벤트 버블링, 캡쳐링, 위임