Week4-(1): 이벤트 버블링, 캡쳐링, 위임

ESH·2024년 6월 15일

스프린트프론트엔드8기 취업까지달린다 코드잇스프린트

위클리페이퍼

목록 보기

6/9

이벤트 버블링, 캡쳐링, 그리고 위임

이번에 공부한 이벤트 처리에 대해 정리해봤습니다. 특히 이벤트 버블링(Bubbling), 캡쳐링(Capturing), 그리고 이벤트 위임(Delegation)에 대해 자세히 알아보았습니다.

1. 이벤트 버블링 (Event Bubbling)

이벤트 버블링은 특정 HTML 요소에서 발생한 이벤트가 그 요소의 부모 요소로 전파되는 것을 의미합니다. 즉, 이벤트가 발생한 요소에서 시작하여 상위 요소들로 전파되기 때문에 "버블링"이라는 이름이 붙었습니다.

예시:

<div id="parent">
  <button id="child">Click Me!</button>
</div>

<script>
document.getElementById('parent').addEventListener('click', function() {
  console.log('Parent Clicked');
});

document.getElementById('child').addEventListener('click', function() {
  console.log('Child Clicked');
});
</script>

위의 예시에서 button을 클릭하면 콘솔에 Child Clicked와 Parent Clicked가 차례로 출력됩니다. 이는 클릭 이벤트가 먼저 button 요소에서 발생하고, 그 다음에 div 요소로 전파되었기 때문입니다. 이처럼 이벤트는 가장 안쪽의 요소에서 시작하여 상위 요소로 전파됩니다.

2. 이벤트 캡쳐링 (Event Capturing)

이벤트 캡쳐링은 이벤트가 상위 요소에서 시작하여 하위 요소로 전파되는 과정을 말합니다. 기본적으로 모든 이벤트는 캡쳐링 단계와 버블링 단계를 거치며, 캡쳐링 단계는 버블링 단계 이전에 발생합니다. 이벤트 리스너를 설정할 때 세 번째 매개변수로 true를 전달하면 캡쳐링 단계에서 이벤트를 처리할 수 있습니다.

예시:

<div id="parent">
  <button id="child">Click Me!</button>
</div>

<script>
document.getElementById('parent').addEventListener('click', function() {
  console.log('Parent Clicked');
}, true);

document.getElementById('child').addEventListener('click', function() {
  console.log('Child Clicked');
});
</script>

위의 예시에서 true 매개변수는 이벤트 리스너가 캡쳐링 단계에서 호출됨을 의미합니다. 따라서 button을 클릭하면 콘솔에 Parent Clicked가 먼저 출력되고, 그 다음 Child Clicked가 출력됩니다. 이벤트가 상위 요소에서 하위 요소로 전파되기 때문입니다.

3. 이벤트 위임 (Event Delegation)

이벤트 위임은 이벤트 리스너를 개별 하위 요소에 설정하지 않고, 공통 상위 요소에 이벤트 리스너를 설정하여 여러 하위 요소의 이벤트를 처리하는 기법입니다. 이렇게 하면 성능을 최적화할 수 있으며, 동적으로 생성된 요소에도 이벤트를 적용할 수 있습니다.

예시:

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
document.getElementById('list').addEventListener('click', function(event) {
  if (event.target && event.target.nodeName === 'LI') {
    console.log('List item clicked:', event.target.textContent);
  }
});
</script>