이벤트 버블링과 이벤트 위임

목록 보기

2/5

💭 이벤트 버블링

이벤트 버블링(Event Bubbling)은 DOM 요소에서 이벤트가 발생했을 때, 해당 요소를 포함하고 있는 상위 요소들로 이벤트가 전파되는 현상

아래와 같은 HTML 구조가 있다고 가정

<div id="parent">
  <button id="child">Click me</button>
</div>

기서 #child 버튼을 클릭하면, 클릭 이벤트는 먼저 #child에서 발생

그런 다음 이벤트는 #parent와 같은 상위 요소로 전파되며, 마지막으로 문서의 최상위에 위치한 <html> 태그까지 도달

→ 이러한 과정을 '이벤트 버블링'

또한 만약 우리가 #parent에 클릭 이벤트 리스너를 등록한다면, 그 안에 있는 어떠한 자식 요소(#child 포함)를 클릭하더라도 해당 리스너가 호출

→ 자식 요소에서 발생한 클릭 이벤트가 부모인 #parent까지 버블링되기 때문

이벤트 위임(Event Delegation)은 특정 요소에서 발생하는 이벤트를 그 요소의 상위 요소에서 처리하는 방식

JavaScript의 이벤트 버블링(Event Bubbling) 메커니즘을 활용한 것

상위 요소에 하나의 이벤트 리스너만 추가하여, 하위 요소에 대한 여러 이벤트를 처리한다는 것이 핵심 아이디어

그러므로 동적으로 추가되거나 제거되는 하위 요소들에 대해 개별적으로 이벤트 리스너를 설정하거나 제거할 필요가 없음

리스트 아이템 <li> 여러 개가 있는 <ul> 태그가 있다고 가정

→ 각각의 <li> 태그에 클릭 시 발생하는 함수를 설정하려면 각 아이템마다 별도로 이벤트 리스너를 붙여야 함

그러나 아래와 같이 <ul> 클릭 시 실행될 함수(이벤트 리스너)를 한 번만 붙인다면?

document.querySelector('ul').addEventListener('click', function(event) {
  console.log(event.target); // 실제 클릭된 li element
});

새로운 아이템(li)를 추가하거나 제거하더라도 추가로 무언가를 해줄 필요가 없음

위와 같은 방법으로 이벤트 위임은 더 효율적인 메모리 사용과 더 나은 성능을 제공해 줌