이벤트 버블링과 캡처링에 대해 설명해주세요.

 

답변

두 개념은 브라우저에서 특정 화면 요소의 이벤트를 감지하는 방식입니다.

이벤트 버블링은 이벤트가 가장 깊은 요소에서 시작해 상위 요소로 전파되는 방식입니다. 반대로, 이벤트 캡처링은 상위 요소에서 시작해 하위 요소로 전파됩니다. 기본적으로 브라우저는 이벤트 버블링을 사용하며, 필요 시 addEventListener의 세 번째 인자로 true를 주어 캡처링을 사용할 수 있습니다. 이벤트 전파를 중지하려면 stopPropagation()을 사용할 수 있습니다.

이벤트 버블링 (Event Bubbling)

이벤트 버블링은 이벤트가 가장 깊은 자식 요소에서 발생하여 부모 요소를 거쳐 최상위 요소로 상향 전파되는 방식입니다. 즉, 이벤트가 발생하면 그 이벤트는 해당 요소에서 처리된 후 부모로 전파되고, 계속해서 상위 요소로 전파됩니다. 브라우저의 기본 이벤트 흐름은 이벤트 버블링 방식입니다.

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

<script>
  document.getElementById('parent').addEventListener('click', () => {
    console.log('부모 요소 클릭');
  });

  document.getElementById('child').addEventListener('click', () => {
    console.log('자식 요소 클릭');
  });
</script>

동작: child 버튼을 클릭하면 "자식 요소 클릭"이 먼저 출력되고, 그 다음 "부모 요소 클릭"이 출력됩니다. 이는 이벤트가 자식 요소에서 발생한 후 부모 요소로 버블링되었기 때문입니다.

이벤트 캡처링 (Event Capturing)

이벤트 캡처링은 이벤트가 최상위 부모 요소에서 시작하여 자식 요소로 하향 전파되는 방식입니다. 즉, 이벤트는 상위 요소에서 먼저 발생한 후 하위 요소로 전달됩니다. 캡처링 방식으로 이벤트를 처리하려면 addEventListener의 세 번째 인자로 true를 전달해야 합니다.

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

<script>
  document.getElementById('parent').addEventListener(
    'click',
    () => {
      console.log('부모 요소 캡처링');
    },
    true // 캡처링 단계에서 이벤트 처리
  );

  document.getElementById('child').addEventListener('click', () => {
    console.log('자식 요소 클릭');
  });
</script>

동작: child 버튼을 클릭하면 캡처링 단계에서 부모 요소의 리스너가 먼저 실행되어 "부모 요소 캡처링"이 출력된 후, 자식 요소의 리스너가 실행되어 "자식 요소 클릭"이 출력됩니다.

이벤트 전파 방지

이벤트가 상위 또는 하위 요소로 전파되는 것을 원하지 않을 경우, event.stopPropagation() 메서드를 사용하여 이벤트 전파를 중지할 수 있습니다. 이를 통해 특정 요소에서만 이벤트가 처리되도록 할 수 있습니다.

document.getElementById('child').addEventListener('click', (event) => {
  event.stopPropagation(); // 이벤트 전파 중지
  console.log('자식 요소 클릭');
});

동작: 위 코드에서는 child 요소에서 발생한 이벤트가 부모 요소로 전파되지 않으며, "자식 요소 클릭"만 출력됩니다.