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

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

특정 이벤트가 발생했을 때, 해당 이벤트가 이벤트를 발생시킨 요소에서 시작하여 상위 요소들로 순차적으로 전파되는 현상. 이벤트 캡처링(Event Capturing)과는 반대 방향의 개념

 

이벤트 버블링 중지
이벤트가 상위 요소들로 전파되지 않도록 막아야 할 때 event.stopPropagation() 메서드를 사용

function handleButtonClick(e) {
    e.stopPropagation();
    console.log("button clicked!");
  }

---

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

이벤트가 발생할 때, 최상위 요소에서부터 이벤트가 발생한 요소까지의 경로를 따라 내려오면서 이벤트를 처리하는 방식. 이벤트 버블링(Event Bubbling)과 반대되는 개념

 

이벤트 캡처링 중지

이벤트가 더 이상 상위 또는 하위 요소로 전파되지 않도록 event.stopPropagation() 메서드를 사용

function handleBadgeClick(e) {
    e.stopPropagation();
    console.log("badge");
  }

---

3. 이벤트 캡처링과 버블링 비교

이벤트 캡처링과 이벤트 버블링은 이벤트가 DOM 요소들 간에 전파되는 방식이 다르다.

• 이벤트 캡처링: 최상위 요소에서 시작하여 이벤트가 발생한 요소로 내려오면서 이벤트를 처리합니다.
• 이벤트 버블링: 이벤트가 발생한 요소에서 시작하여 최상위 요소로 올라가면서 이벤트를 처리합니다.

캡처링과 버블링을 함께 사용하는 경우, 캡처링 단계에서 리스너가 먼저 실행되고, 버블링 단계에서 리스너가 나중에 실행됩니다.