[Frontend Interview] 캡처링

ko.javascript.info/bubbling-and-capturing

버블링과 캡처링

 

표준 DOM 이벤트에서 정의한 이벤트 흐름에는 3가지 단계가 있다.

1. 캡처링 단계

: 이번트가 하위 요소로 전파되는 단계

2 타깃 단계

: 이벤트가 실제 타깃 요소에 전달되는 단계

3 버블링 단계

: 이벤트가 상위 요소로 전파되는 단계

 

보통의 경우에 addEventListener나 on<event> 속성을 사용할 때에는 2,3 단계에서만 동작하므로 캡처링 단계는 알 수가 없다.

캡처링 단계에서 이벤트를 잡아내려면 addEventListener에 capture옵션을 true로 주어야한다.

elem.addEventListener(..., {capture: true})

즉, addEventListener의 capture값이 false이면 핸들러는 버블링 단계에서 동작하고,

true이면 핸들러는 타깃단계에서 트리거가 된다.

 

즉 아래 예시의 경우

<form>FORM
  <div>DIV
    <p>P</p>
  </div>
</form>

<script>
  for(let elem of document.querySelectorAll('*')) {
    elem.addEventListener("click", e => alert(`캡쳐링: ${elem.tagName}`), true);
    elem.addEventListener("click", e => alert(`버블링: ${elem.tagName}`));
  }
</script>

1. 캡처링 단계의 이벤트를 통해 HTML, BODY, FORM, DIV순으로 출력되고,

2. 타겟 단계에서 이벤트가 타깃 요소에 도착해 실행되고

3. 버블링 단계의 이벤트를 통해 DIV, FORM, BODY, HTML 가 출력된다.

 

+ addEventListener에 캡처링 설정을 해줬다면

removeEventListener에도 removeEventListener(..., {capture:true}) 속성을 주어 이벤트를 제거해야 한다.

 

+ event.target: 이벤트가 발생한 가장 안쪽의 요소

event.currentTarget = this : 이벤트를 핸들링하는 현재 요소. (핸들러가 실제 할당된 요소)

event.eventPhase : 현재 이벤트 흐름단계 (캡처링=1, 타깃=2, 버블링=3)