[버블링과 캡처링] 자바스크립트의 이벤트가 흐르는 길

728x90

이벤트 버블링(Event Bubbling)과 이벤트 캡처링(Event Capturing) 

웹 페이지에서 클릭 이벤트를 처리할 때, 이벤트가 의도한 대로 작동하지 않아서 당황한 적 있으신가요? 이벤트 버블링과 캡처링은 DOM 트리 구조를 따라 이벤트가 전파되는 방식입니다. 이를 제대로 이해하면 이벤트 위임, 중첩 요소 처리, 성능 최적화 등 다양한 상황에서 스마트하게 코드를 작성할 수 있습니다.

 

---

1.  이벤트 흐름이란?

브라우저는 DOM 요소에 이벤트가 발생하면 세 가지 단계로 이벤트를 처리합니다.

1. 캡처링 단계 (Capturing Phase)
   • 이벤트가 최상위 요소(document)에서 시작하여 이벤트가 발생한 실제 요소(target)까지 내려옵니다.
2. 타깃 단계 (Target Phase)
   • 이벤트가 실제로 발생한 요소에서 처리됩니다.
3. 버블링 단계 (Bubbling Phase)
   • 이벤트가 발생한 요소에서 다시 상위 요소로 전파되며 올라갑니다.

 

---

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

이벤트가 타깃 요소에서 상위 요소로 전파되는 방식입니다.

[document]
   ↑ (Bubbling)
[parent]
   ↑
[child] ← 이벤트 발생(target)

특징

• JavaScript의 기본 이벤트 전파 방식
• 이벤트 위임에 자주 활용
• addEventListener의 기본 설정 (useCapture = false)

예제 코드

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

<script>
  document.getElementById("parent").addEventListener("click", () => {
    console.log("Parent clicked");
  });

  document.getElementById("child").addEventListener("click", () => {
    console.log("Child clicked");
  });
</script>

 

결과 : 

Child clicked
Parent clicked

• 버튼을 클릭하면 이벤트가 child → parent로 전파되어 로그가 두 번 출력됩니다.

 

---

3.  이벤트 캡처링(Event Capturing)

이벤트가 최상위 요소에서 타깃 요소로 내려가며 전파되는 방식입니다.

[document]
   ↓ (Capturing)
[parent]
   ↓
[child] ← 이벤트 발생(Target)

특징

• 덜 자주 사용되지만 특정 상황에서 유용
• addEventListener의 세 번째 인자를 true로 설정해야 작동
• 버블링과는 반대 방향

예제 코드

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

<script>
    document.getElementById("parent").addEventListener("click", () => {
      console.log("Parent clicked (capturing)");
    }, true);

    document.getElementById("child").addEventListener("click", () => {
      console.log("Child clicked");
    });
</script>

결과 :

Parent clicked (capturing)
Child clicked

 

---

4.  이벤트 전파를 막고 싶다면?

두 가지 방법이 있습니다.

1. event.stopPropagation()
   • 이벤트 전파를 완전히 중단
2. event.stopImmediatePropagation()
   • 같은 요소에 등록된 다른 리스너 실행도 중단

child.addEventListener("click", (e) => {
  e.stopPropagation();
  console.log("Propagation stopped");
});

 

---

5.  이벤트 위임에 활용되는 버블링

이벤트 버블링은 이벤트 위임(event delegation)에 유용합니다. 수많은 하위 요소에 각각 리스너를 붙이지 않고, 상위 요소에서 이벤트를 감지하는 방식입니다.

예제

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

<script>
  document.getElementById("list").addEventListener("click", (e) => {
    if (e.target.tagName === "LI") {
      console.log(`Clicked: ${e.target.textContent}`);
    }
  });
</script>

 

 

---

6.  마무리

개념	방향	사용 여부	설정 방식
캡처링	상위 → 타깃	드묾	addEventListener(..., true)
버블링	타깃 → 상위	자주 사용	기본 동작

이벤트 버블링과 캡처링은 DOM 이벤트 흐름의 기초이자 이벤트 처리 전략의 핵심입니다. 이 흐름을 잘 이해하고 적절히 활용하면, 복잡한 UI에서도 깔끔하고 효율적인 코드를 작성할 수 있습니다.

함께 보면 좋은 자료

외부 사이트 : 

• MDN Web Docs - Event bubbling and capturing

블로그 글 :

[이벤트 리스너] 사용자와 코드 사이를 잇는 연결고리

 

---

반응형