[JS] Javascript Propagation :: 이벤트 버블링, 이벤트 타겟, 이벤트 캡쳐

Javascript Propagation 이란?

Propagation 이란 이벤트가 전파되는 모든 경로를 포함하는 말이다. 이때 Javascript 개발을 하면서 많이 들어봤을 이벤트 버블링 이라는 용어가 나온다.

<div>

<ul>

<li>

<a>

<button>버튼~</button>

</a>

</li>

</ul>

</div>

위와 같은 구조를 가졌을 때, <button>을 클릭하면 <button> 상위에 있는 요소들(a, li, ul, div)에 다 onclick 이벤트가 발생하게 된다.

이벤트는 계속 위로 올라가게 되는데, 이때 window 객체를 만나면 이벤트가 종료된다. 

클릭한 <button>은 이때 event target이 된다. 그리고 여기서 요소들은 하나의 브랜치를 만들게 되는데, 이 브랜치 안에는

event target을 포함하여 window 까지의 모든 요소들이 다 들어가게 된다. 위의 예제에서는 button, a, li, ul, div, body, html, window 까지 하나의 브랜치로 잡힌다. 여기서 브랜치는 중요한 역할을 하게 되는데, 이벤트가 전파되는 경로이기 때문이다.

이벤트는 양방향 경로를 가지고 있다. 그래서 상위 요소에서 event target 으로 왔다가 다시 상위 요소까지 가게 되는 경로이다.

이 경로들을 세단계로 나눌 수 있다.

1. event capture

window 에서 event target의 부모 까지의 경로

> window - html - body - div - ul - li - a

2. event target

이벤트 타겟 자신 

> button

3. event bubble

이벤트 타겟의 부모부터 window 객체 까지

> a - li - ul - div - body - html - window

1. Event Capture

이벤트 캡쳐 단계에서는 capturer 리스너들만 실행이 된다. 

item.addEventListener('click',() => {console.log('bubbling1')}, true);

예를 들어 다음과 같이 addEventListener 의 세번째 파라미터가 true 인 경우에만 이벤트가 전파된다.

따라서 이러한 구조를 가진 DOM이 있을 때, (1번, 2번, 3번에 모두 onclick 이벤트가 걸려있다.)

모든 요소의 세번째 파라미터가 true 인 상태에서 1번을 클릭한다면, Event Capture 단계 이기 때문에 부모인 3번이 호출 된 후, 2번이 호출되고, 자기 자신인 1번이 호출된다. (이때 모든 요소에 세번째 파라미터가 true여야 한다.)

만약, 2번의 세번째 파라미터를 false 로 두고 1번을 클릭했을 때는  3번 호출 -> 자기자신 1번 호출 의 순으로 2번을 건너뛴 채 호출된다. 

2. Event Target

이 단계에서는 요소에 등록된 모든 리스너들이 실행된다. 개수는 상관없다. 등록된 순서에 따라 실행된다.

3. Event Bubbling

이벤트 버블링 단계에서는 이벤트 캡쳐때와 정 반대의 효과가 일어난다고 보면 된다.

item.addEventListener('click',() => {console.log('bubbling1')}, false);

버블링은 세번째 파라미터가 false 이거나 없는 경우에만 리스너가 전달된다. (non-capturer 들만 해당됨) 

버블링은 캡쳐와 반대이기 때문에 자식 -> 부모 순으로 호출된다. 

그래서 만약 모든 요소가 non-capturer(세번째 파라미터가 false이거나 없을때) 이고, 1번을 클릭한다면 호출 순서는

1번 -> 2번 -> 3번의 순이 된다.

그리고 여기서도 만약에 2번 요소가 capturer(세번째 파라미터가 true) 이고, 1번을 클릭한다면 호출 순서는

1번 -> 3번 순이 된다.

참고:

https://github.com/cocopang/wiki/wiki/JavaScript%EC%9D%98-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81%EC%9D%B4%EB%9E%80%3F-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%ED%94%84%EB%A1%9C%ED%8C%8C%EA%B2%8C%EC%9D%B4%EC%85%98%EC%9C%BC%EB%A1%9C-%EC%84%A4%EB%AA%85%ED%95%B4%EB%B3%B4%EC%9E%90

https://project42da.github.io/js/2017/01/30/js-bubblingcapturing/