[JavaScript] 이벤트 버블링과 캡처링

개요

---

차세대 프로젝트에서 제이쿼리를 이용하여 프론트엔드 개발 중, 의도치 않은 이벤트 중첩으로 인해 알람창이 중복으로 뜨는 등의 문제를 경험한 적이 있다. 처음에는 이런 현상이 왜 발생하는지 몰랐는데, 알고 보니 자바스크립트의 이벤트 흐름인 버블링과 캡처링 개념을 제대로 이해하지 못했기 때문이었다. 이번 글에서는 이 두 가지 개념을 쉽게 설명하고자 한다.

 

이벤트 버블링이란?

---

이벤트 버블링(Event Bubbling)은 자바스크립트에서 이벤트가 발생한 자식 요소에서 시작해 부모 요소로 전파되는 방식이다. 물 속에서 발생한 기포 방울(Bubble)이 아래에서 위로 올라가는 이미지를 연상하면 쉽다. 즉, 가장 구체적인 요소에서 이벤트가 발생하면 그 이벤트가 상위 요소들로 차례차례 전달된다.

 

예를 들어, <div> 안에 있는 <button>을 클릭하면, 해당 버튼에 연결된 이벤트가 먼저 실행되고, 그 이벤트는 부모 요소인 <div>로 전파된다.

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

<script>
  document.getElementById('child').addEventListener('click', () => {
    console.log('버튼 클릭됨');
  });

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

 

이 코드를 실행하면 버튼을 클릭할 때, "버튼 클릭됨"과 "부모 div 클릭됨"이 차례대로 출력된다. 이는 이벤트가 자식 요소에서 부모 요소로 전파되기 때문이다.

 

이벤트 캡처링이란?

---

이벤트 캡처링(Event Capturing)은 버블링과 반대되는 개념이다. 이벤트가 부모 요소에서 시작해 자식 요소로 전달된다. 자바스크립트에서는 기본적으로 이벤트 버블링이 먼저 일어나지만, 캡처링 단계를 사용하려면 addEventListener 메서드의 세 번째 인자로 true를 전달하면 된다.

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

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

  document.getElementById('child').addEventListener('click', () => {
    console.log('버튼 클릭됨');
  });
</script>

 

이 코드를 실행하면 버튼을 클릭했을 때 "부모 div 클릭됨"이 먼저 출력되고, 그 다음에 "버튼 클릭됨"이 출력된다. 이는 캡처링 단계에서 부모 이벤트가 먼저 처리되기 때문이다.

 

버블링과 캡처링의 차이점

---

버블링과 캡처링은 이벤트가 전파되는 순서에 따라 구분된다. 버블링은 자식 요소에서 부모 요소로 이벤트가 전달되는 방식이고, 캡처링은 부모 요소에서 자식 요소로 이벤트가 전달된다. 자바스크립트는 기본적으로 버블링 방식을 사용하지만, addEventListener의 옵션을 통해 캡처링을 적용할 수 있다.

 

코드 예시

---

다음은 버블링과 캡처링을 모두 사용하는 예시이다.

<div id="outer">
  <div id="inner">
    <button id="btn">Click Me</button>
  </div>
</div>

<script>
  document.getElementById('outer').addEventListener('click', () => {
    console.log('외부 div 클릭됨');
  }, true); // 캡처링

  document.getElementById('inner').addEventListener('click', () => {
    console.log('내부 div 클릭됨');
  });

  document.getElementById('btn').addEventListener('click', () => {
    console.log('버튼 클릭됨');
  });
</script>

 

버튼을 클릭하면 "외부 div 클릭됨"이 먼저 출력되고, 그 다음에 "내부 div 클릭됨", 마지막으로 "버튼 클릭됨"이 출력된다. 이처럼 캡처링과 버블링이 차례로 일어나며 이벤트가 전파되는 과정을 확인할 수 있다.

 

정리

---

이벤트 버블링과 캡처링은 자바스크립트에서 이벤트가 어떻게 전파되는지에 대한 중요한 개념이다. 이를 잘 이해하면 부모와 자식 요소 간의 이벤트 처리에서 예기치 않은 동작을 방지할 수 있다. 특히 복잡한 DOM 구조를 가진 애플리케이션에서 정확한 이벤트 처리가 필요할 때 버블링과 캡처링을 적절히 활용하는 것이 중요할 것 같다.