[TECH-QA] 이벤트 버블링(Event Bubbling)과 이벤트 캡쳐링(Event Capturing)

이벤트 버블링(Event Bubbling)

📝 이벤트 버블링의 동작 원리

📝 이벤트 위임(Event Delegation)

📝 이벤트 전파 방지

HTML 구조

<div id="parent">
  <button id="child1">버튼 1</button>
  <button id="child2">버튼 2</button>
</div>

JavaScript 코드

// 부모 요소에 이벤트 핸들러 등록 (이벤트 위임)
document.getElementById('parent').addEventListener('click', function(event) {
  console.log('부모 요소에서 이벤트 감지:', event.target.id);
  
  // 특정 조건에서 이벤트 전파 중지
  if (event.target.id === 'child1') {
    console.log('child1 클릭 시 전파 중지');
    event.stopPropagation();
  }
});

// 개별 요소에 핸들러 추가 (비교용)
document.getElementById('child1').addEventListener('click', function() {
  console.log('child1에서 직접 처리');
});

📝 버블링 확인

• "버튼 1"(child1)을 클릭하면 먼저 child1에 등록된 핸들러가 실행되어 "child1에서 직접 처리"가 출력됩니다.
• 이후 이벤트가 부모(parent)로 버블링되어 "부모 요소에서 이벤트 감지: child1"이 출력됩니다.
• 추가로 stopPropagation()이 호출되므로 더 이상 상위로 전파되지 않습니다.

📝 이벤트 위임 확인

• "버튼 2"(child2)를 클릭하면 child2에는 개별 핸들러가 없지만, 부모 요소에 등록된 핸들러가 이를 감지해 "부모 요소에서 이벤트 감지: child2"를 출력합니다.
• 이를 통해 개별 버튼마다 핸들러를 등록하지 않아도 부모에서 모든 클릭 이벤트를 처리할 수 있음을 알 수 있습니다.

📝 실제 활용 예시

• 예를 들어, 동적으로 버튼이 추가되는 리스트가 있다고 가정할 때, 각 버튼에 핸들러를 추가하는 대신 부모
  요소에 핸들러를 등록하면 새로 추가된 버튼도 자동으로 처리됩니다.

  이벤트 캡쳐링(Event Capturing)

  이벤트 캡쳐링(Event Capturing)은 이벤트가 최상위 요소에서 시작해 하위 요소로 내려가는 방식으로, 버블링과는 반대 방향으로 작동합니다. HTML에서는 기본적으로 버블링이 주로 사용되지만, 필요에 따라 캡쳐링도 활용할 수 있습니다.

  📝 캡쳐링 사용 예제

  document.getElementById('parent').addEventListener('click', function() {
    console.log('캡쳐링 단계에서 감지');
  }, { capture: true }); // 캡쳐링 모드 활성화

  { capture: true } 옵션을 추가하면 이벤트가 캡쳐링 단계에서 처리됩니다. 이 경우, 부모에서 먼저 이벤트가 감지된 후 자식으로 전달됩니다.