이벤트 버블링, 캡처링

dropmenu를 만들면서 event에 대해 많이 찾아보고 공부하게 되었다.

 

 

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

 

1. 캡처링 단계 - 이벤트가 하위요소로 전파되는 단계

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

3. 버블링 단계 - 이벤트가 상위요소로 전달되는 단계

 

가장 하위단계의 태그이벤트를 실행시키면 최상위에서 아래로 전파 (캡처링 단계),

이벤트가 타깃 요소에 도착해서 실행(타깃 단계),

다시 상위요소로 전달되는 (버블링 단계)

위 과정을 통해 요소에 할당된 이벤트 핸들러가 호출된다.

 

 

 

⭐ 이벤트 버블링

<form onclick="alert('form')">
  <div onclick="alert('div')">
    <p onclick="alert('p')"><p>
  </div>
</form>

가장 안쪽에 있는 p태그를 클릭하게 되면 p → div → form 순서로 alert창이 열린다.

위 흐름을 이벤트 버블링이라고 한다.

이벤트가 제일 깊은 곳에있는 요소에서 시작해 부모 요소를 거슬러 올라가며 발생하는 모양이 마치 bubble과 닮았기 때문이다.

 

 

 

⭐ 이벤트 타깃

 

이벤트가 발생한 가장 안쪽 요소는 target 요소라고 불리며, event.target을 사용해 접근할 수 있다.

 

event.target과 event.currentTarget의 차이점

- event.target → 실제 이벤트가 시작된 타깃 요소이다. 버블링이 진행되어도 변하지 않는다.

- event.currentTarget → event.currentTarget = this 현재 요소로, 현재 실행 중인 핸들러가 할당된 요소를 참조한다.

 

 

 

⭐ 이벤트 캡쳐링

<form>
  <div>
    <p><p>
  </div>
</form>

form → div → p 순서로 alert창이 열린다.

 

캡쳐링 단계는 흔하지 않다. 주로 버블링을 사용.

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

 

보통 capture은 false가 defalut 때문에 대부분 신경쓰지 않고 이벤트를 실행시킨다.

- false는 버블링단계에서 동작한다.

- true는 캡처링 단계에서 동작한다.

 

 

버블링과 캡처링