[Javascript] 이벤트 버블링(Event Bubbling), 이벤트 위임(Event Delegation)

자바스크립트에서 이벤트 위임과 이벤트 버블링은
효율적인 이벤트 핸들링을 위해 사용되는 이벤트 핸들링 패턴입니다.

이번에 각각에 개념을 확인해 보고, 예시를 통해 어떤 식으로 활용되는지 살펴보려 합니다.

| 이벤트 버블링(Event Bubbling)

이벤트 버블링은 DOM요소에서 이벤트가 발생했을 때, 해당 이벤트가 부모 요소로 전파되는 것을 말합니다.

아래 코드를 보면 버튼을 클릭하면 "자식 요소 클릭", "부모 요소 클릭"이 동시에 출력이 됩니다.

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

document.getElementById('parent').addEventListener('click', () => {
  console.log('부모 요소 클릭');
});
document.getElementById('child').addEventListener('click', (e) => {
  console.log('자식 요소 클릭');
});

 

만약 이때 "자식 요소 클릭"만 출력되도록 이벤트 버블링을 막고 싶으면

e.stopPopagation()을 자식 요소에 추가해 주면 됩니다.

document.getElementById('parent').addEventListener('click', () => {
  console.log('부모 요소 클릭');
});
document.getElementById('child').addEventListener('click', (e) => {
  console.log('자식 요소 클릭');
  e.stopPropagation(); // 이벤트 버블링 막기
});

| 이벤트 위임(Event Delegation)

이벤트 버블링을 활용하여 상위 요소에 이벤트 리스너를 추가하면
하위 요소에서 발생한 이벤트도 상위 요소에서 감지할 수 있습니다.

 

이벤트 위임은 이를 활용해 많은 하위 요소에 이벤트를 등록하려 할 때,
모든 요소에 개별적으로 리스너를 추가하는 것이 아닌,
상위 요소에 하나만 등록하여 하위 요소에서 발생한 이벤트를 처리하는 이벤트 핸들링 패턴입니다.

 

아래 코드와 같이 event.target 속성을 통해 실제로 이벤트가 발생한 요소를 식별할 수 있습니다.

<ul id="list">
  <li>아이템 1</li>
  <li>아이템 2</li>
  <li>아이템 3</li>
</ul>

document.getElementById('list').addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    console.log('클릭한 아이템:', event.target.textContent);
  }
});

이처럼 리스트들의 상위 요소에 이벤트 핸들러를 등록하고,
클릭된 요소가 li태그 일 경우에 해당 요소의 text를 출력할 수 있습니다.

 

이렇게 하면 새로운 리스트가 추가되어도 이벤트 핸들러를 별도로 등록할 필요가 없습니다.

| 끝

이벤트 위임과 버블링을 잘 활용하면 코드의 유지보수성을 높이는데 도움을 줄 수 있을 거 같습니다.

기존에 대략 알고 있던 개념이지만 실제 프로젝트에서 제대로 이해하고 활용해 본 경험은 많이 없는 거 같아서 이번 기회에 개념을 한번 정리하고 이후에 활용해 보고자 합니다.