[JavaScript] 버블링(Bubbling)과 캡처링(Capturing)

728x90

목 차

• 1. 버블링(Bubbling)이란?
• 2. 이벤트 흐름의 단계
• 2-1. 캡처링 단계 (Capturing Phase)
• 2-2. 타깃 단계 (Target Phase)
• 2-3. 버블링 단계 (Bubbling Phase)
• 3. 버블링의 예제
• 4. 버블링의 방지
• 5. 버블링과 캡처링 비교

반응형

 

1. 버블링(Bubbling)이란?

• 버블링(Bubbling)은 DOM(Document Object Model) 이벤트 흐름의 한 단계로, 특정 요소에서 발생한 이벤트가 계층 구조 상위로 전파되는 과정을 말합니다. 즉, 이벤트가 발생한 요소에서 시작하여 그 부모 요소, 조상 요소로 계속 전파됩니다.

 

---

 

2. 이벤트 흐름의 단계

2-1. 캡처링 단계 (Capturing Phase)

• 이벤트가 최상위 조상(보통 document 객체)에서부터 시작하여 이벤트가 발생한 대상 요소로 내려가는 단계입니다.
• 이 단계는 위에서 아래로 이벤트가 전달됩니다.

 

2-2. 타깃 단계 (Target Phase)

• 이벤트가 실제로 발생한 요소에서 실행되는 단계입니다.

 

2-3. 버블링 단계 (Bubbling Phase)

• 이벤트가 발생한 대상 요소에서 시작하여 계층 구조 상위로 전파되는 단계입니다.
• 아래에서 위로 이벤트가 전달됩니다.

 

---

 

3. 버블링의 예제

<script>
    const parent = document.getElementById("parent");
    const child = document.getElementById("child");

    // 부모 요소에 이벤트 리스너 추가
    parent.addEventListener("click", () => {
        console.log("Parent clicked");
    });

    // 자식 요소에 이벤트 리스너 추가
    child.addEventListener("click", () => {
        console.log("Child clicked");
    });
</script>

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

 

결과 : 사용자가 버튼(child)을 클릭하면 버블링에 의해 다음과 같은 순서로 이벤트가 발생합니다.

• Child clicked (타깃 단계에서 실행)
• Parent clicked (버블링 단계에서 실행)

 

---

 

4. 버블링의 방지

• 버블링이 필요하지 않을 때는 stopPropagation() 메서드를 사용하여 이벤트 전파를 막을 수 있습니다.

child.addEventListener("click", (event) => {
    console.log("Child clicked"); // 이벤트 대상만 코드 실행
    event.stopPropagation(); // 이벤트 전파 중단
});

 

결과 : 버튼(child)을 클릭해도 부모 요소(parent)의 이벤트는 실행되지 않습니다.

 

---

 

5. 버블링과 캡처링 비교

특징	버블링	캡처링
전파 방향	하위 요소 → 상위 요소	상위 요소 → 하위 요소
기본 동작	대부분의 이벤트에서 기본적으로 활성화	캡처링을 활성화하려면 추가 설정이 필요
이벤트 리스너 등록	addEventListener(type, listener)	addEventListener(type, listener, true)