JS(자바스크립트)의 이벤트 버블링과 캡처링 알아보기

자바스크립트 이벤트 전파와 정지 방법

웹 개발을 하다 보면 자바스크립트 이벤트 전파에 대해 이해하는 것이 중요한데(부트캠프할때 이것때문에 애먹은 적이 있음)

이벤트 전파는 크게 두 가지 방식이 있다.

버블링과 캡처링, 이 두 가지 이벤트 전파 방식과 이를 제어하는 방법에 대해 알아보자

---

버블링
버블링은 이벤트가 자식 요소에서 부모 요소로, 최종적으로는 최상위 요소까지 전파되는 현상

ex) 클릭 이벤트가 발생하면 다음과 같은 순서로 버블링 발생
aTag -> .child -> .parent -> body -> window

버블링의 단계

1. 이벤트가 목표 요소에서 시작
2. 이벤트가 부모 요소로 점차 전달
3. 이벤트가 최상위 요소(루트)까지 도달

만약 이벤트가 특정 요소에서 더 이상 전파되지 않도록 하고 싶다면, event.stopPropagation() 메서드를 사용하면 해결

element.addEventListener('click', function(event) {
    event.stopPropagation(); // 버블링 정지
    // 추가 로직
});

 

---

캡처링 (Capturing)
캡처링은 버블링과는 반대로, 이벤트가 최상위 요소(루트)에서 시작하여,

실제 이벤트가 발생한 요소까지 내려가는 방식

캡처링은 부모 요소에서 자식 요소로 이벤트가 전달되는 과정임

캡처링의 단계

1. 이벤트가 루트 요소에서 시작
2. 이벤트가 자식 요소로 점차 전달
3. 이벤트가 목표 요소에 도달

이벤트 전파 단계

1. 캡처 단계: 이벤트가 루트 요소에서 출발하여 하위 요소로 전달되는 단계
2. 타겟 단계: 이벤트가 실제로 발생한 요소에서 이벤트가 처리되는 단계
3. 버블링 단계: 이벤트가 발생한 요소에서 시작하여 상위 요소로 전달되는 단계

---

 

각 단계들만 알아도 이벤트가 왜 안되지? 뭐가 이상하지 하는 문제들을 줄여줄 수 있다고 생각해서 간단하게 정리