[JavaScript] Event Flow ooO

 

이번주 탐구할 주제는 Event Flow 🏊‍♀️

이벤트 플로우가 뭔지 알아보고, 이벤트 버블링과 캡쳐링에 대해 알아보자!

 

 

 

간단한 HTML코드이다. html안에 body가 있고 그 안에 div가 있다.

왼쪽 코드를 간단하게 그림으로 나타내 보았고, 사용자가 div를 클릭하면 어떻게 될까?

 

당연히 div를 클릭했으니 div에서는 이벤트가 실행이 될 것이다.

근데 div뿐만 아니라 div의 부모태그인 body, html 태그들도 이벤트가 실행된다.

하지만 이벤트 실행 시에 각 요소에서 이벤트가 한 번에 빡! 하고 실행되는 게 아니라 나름의 순서가 있는데 이것을 Event Flow라고 한다.

 

이벤트 플로우에 대해 설명하기 전 하나 알고 가자!

currentTarget vs target

currentTarget

currentTarget은 이벤트가 실행되는 대상이다.

div에서 currentTarget은 div

body에서 currentTarget은 body

html에서 currentTarget은 html이다.

 

target

target은 이벤트의 시작점이다. 따라서 모두 다 div!

Evnet Flow

이벤트 플로우는 순서가 딱 정해져 있다.

 

 

어디서든지 이벤트가 발생하면 root와 가까운 순서로 실행이 된다.

그림과 같이 html > body 순으로 실행이 되는 단계를 Capture Phase라고 한다. 다른 말로는 propagate up이라고도 하는데 여기서 propagate의 뜻은 전파하다는 뜻으로 propagate up 은 위로 전파하다는 뜻을 가지고 있다.

 

그리고 이벤트의 시작점에서 실행되는 단계는 Target Phase라고 한다.

그리고 target인 div에서 이벤트가 실행이 되고 다시 역순으로 돌아가면서 실행되는데 이 단계를 Bubble Phase라고 한다.

 

하지만 이 Event FLow에 따라 이벤트를 다 실행하게 되면 너무나 많은 이벤트가 실행이 될 것이다.

따라서 브라우저는 부모태그들에게 선택권을 준다, 이벤트가 Capture Phase에 실행할 것인지 Bubble Phase에 실행할 것인지!

브라우저의 기본값은 bubble이기 때문에 실제 이벤트 실행 순서는

 

 

이 순으로 이벤트가 실행된다.

 

그런데, 이벤트 실행을 Capture 단계에서 실행하고 싶다면 어떻게 해야 할까?

그 방법은 addEventListener의 3번째 인자에 옵션을 추가해주면 된다.

 

https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener

EventTarget.addEventListener() - Web API | MDN

 

 

3번째 인자인 useCapture에 boolean으로 값을 줄 수 있는데 true는 Capture, false는 Bubble 단계에서 이벤트를 실행한다.

 

 

html의 evnetListener의 3번째 옵션에 ture를 줬기에 이벤트 실행 순서가 html > div > body 순으로 실행된다.

Event 전파를 막고 싶다면?

이벤트 실행의 전파를 막고 싶다면 stopPropagation 메서드를 사용하여 전파를 막을 수 있다.

 

 

div에 e.stopPropagation 메서드를 추가하여 div 이후의 이벤트 전파를 막을 수 있다.

마치며

이벤트 플로우에 대해 공부를 하면서

이벤트 버블링과 캡쳐링에 대해 개념은 알고 있었지만 어떻게 활용해야 하는지에 대해서는 몰랐다.

하지만 이렇게 딥하게 알아보며 eventListener의 3번째 인자를 알게 되는 계기가 됐다!