이벤트 버블링, 이벤트 캡처링

• 두 개념은 DOM 이벤트가 전파되는 두 가지의 방식임

  이벤트 버블링

• 이벤트가 발생한 요소부터 시작해 DOM트리를 거슬러 올라가면서 상위 요소들에게 이벤트를 전파

• 버블링 방식으로 처리

• 대부분의 이벤트가 버블링 방식으로 처리됨

• 예시 : 버튼을 클릭하면 이벤트는 먼저 버튼에 적용 > 버튼을 감싸는 요소(div 등), 그리고 최종적으로 body에 전파

// 상위 요소에 이벤트 버블링 리스너 추가
document.getElementById("parent").addEventListener("click", function(event) {
    console.log("버블링 단계: 부모 요소");
}); // 여기서는 캡처링 옵션을 지정하지 않았으므로 기본적으로 버블링 단계에서 동작합니다.

// 하위 요소
document.getElementById("child").addEventListener("click", function(event) {
    console.log("버블링 단계: 자식 요소");
});

이벤트 캡처링

• 이벤트가 최상위 요소에서 시작해 이벤트가 발생한 요소까지 내려오면서 전파되는 구조
• 특정 이벤트를 하위 요소가 처리하기 전에 상위 요소에서 먼저 감지하고 필요한 조치를 취하고자 할 때 사용
• 예시 : 여러 요소에 공통적으로 적용되는 이벤트를 관리하거나, 특정 조건에서 이벤트 전파를 중단할 필요가 있을 때 유용

// 상위 요소에 이벤트 캡처링 리스너 추가
document.getElementById("parent").addEventListener("click", function(event) {
    console.log("캡처링 단계: 부모 요소");
}, true); // true는 캡처링 단계에서 이벤트 리스너를 활성화합니다.

// 하위 요소
document.getElementById("child").addEventListener("click", function(event) {
    console.log("버블링 단계: 자식 요소");
});

두 개념을 알아야 하는 이유

• 복잡한 웹 페이지에서 다양한 요소 간의 이벤트 상호 작용을 효과적으로 관리하기 위해 중요함
• 이벤트 캡처링의 경우 더 세밀한 제어가 가능해지며, 특정 상황에서 필요한 이벤트 처리를 더 잘 조절할 수 있음