[f/e] 캡쳐링과 버블링

1. 캡쳐링과 버블링

캡쳐링(capturing)은 이벤트가 가장 상위의 부모 요소에서부터 시작하여 실제 이벤트가 발생한 요소까지 내려오는 과정을 의미합니다. 따라서 이벤트가 발생한 요소에서 이벤트 리스너를 등록했더라도, 상위 요소에 등록된 이벤트 리스너가 먼저 호출됩니다.

반면에 버블링(bubbling)은 이벤트가 발생한 요소에서 시작하여 상위 요소로 전파되는 과정을 의미합니다. 이 경우에는 이벤트가 발생한 요소에서 등록한 이벤트 리스너가 먼저 호출되고, 그 후에 상위 요소에 등록된 이벤트 리스너가 호출됩니다.

 

이벤트 리스너를 등록할 때, 세 번째 인자로 이벤트 전파 방식을 설정할 수 있습니다. 예를 들어, 아래와 같은 코드에서 캡쳐링을 사용하도록 설정할 수 있습니다.

 

 

document.getElementById("myElement").addEventListener("click", myFunction, true);javascript Copy code document.getElementById("myElement").addEventListener("click", myFunction, false);

따라서, 이벤트 전파 방식을 설정하여 적절한 이벤트 리스너를 호출하여 처리할 수 있습니다.

반면에 버블링을 사용하도록 설정하려면 세 번째 인자를 생략하거나 false로 설정하면 됩니다.

javascript HTML에서 클릭 이벤트는 발생한 요소에서부터 상위 요소로 이벤트가 전파되는 두 가지 방식인 캡쳐링과 버블링에 따라 처리됩니다.

2. 이벤트 전파를 막는 방법

 

event.stopPropagation()을 사용하여 이벤트 전파를 막을 수 있습니다.

 

function myFunction(event) {
  event.stopPropagation();
  // 이벤트 전파를 막는 코드
}

const $a = document.querySelector('a')

$a.addEventListener('click', (event) => {
  event.preventDefault();
});

 

 

3. eventPhase()

Event.CAPTURING_PHASE // 캡쳐링 단계에서 발생한 이벤트
Event.AT_TARGET // 이벤트 대상 요소에서 발생한 이벤트
Event.BUBBLING_PHASE // 버블링 단계에서 발생한 이벤트

이 메소드를 사용하면 이벤트가 발생한 단계를 확인하여 적절한 처리를 수행할 수 있습니다. 예를 들어, 다음 코드는 eventPhase를 사용하여 이벤트가 버블링 단계에서 발생했을 때만 이벤트 핸들러를 실행합니다.위 코드에서 event.eventPhase === Event.BUBBLING_PHASE 조건은 이벤트가 버블링 단계에서 발생한 경우에만 참이 됩니다. 따라서 버블링 단계에서만 console.log가 실행됩니다.

const myButton = document.getElementById("myButton");
myButton.addEventListener("click", function(event) {
if (event.eventPhase === Event.CAPTURING_PHASE) {
console.log("button clicked in capturing phase");
}
}, true);

위 코드는 이벤트 캡쳐링 단계에서 이벤트 핸들러가 실행됩니다. 이벤트 핸들러에서 eventPhase가 Event.CAPTURING_PHASE인 경우에만 console.log가 실행됩니다.

 

또한, 이벤트 캡쳐링 단계에서 이벤트 핸들러를 실행하려면 세 번째 매개변수로 true를 전달하여 addEventListener를 호출하고, 이벤트 핸들러에서 eventPhase를 확인하면 됩니다.

 

const myButton = document.getElementById("myButton"); myButton.addEventListener("click", function(event) { if (event.eventPhase === Event.BUBBLING_PHASE) { console.log("button clicked in bubbling phase"); } });

 

eventPhase 메소드는 이벤트가 현재 어느 단계(캡쳐링 단계, 대상 요소 단계, 버블링 단계)에서 발생했는지를 나타내는 상수값을 반환합니다. eventPhase 상수는 다음과 같습니다.