event Bubbling/ Capturing

Bubbling

- 하위에서 상위 요소로의 이벤트 전파 방식

- addEventListener 의 3번째 인자는 default가 false이며 이때 이벤트 전파 방식: bubbling

EX 1

⇒ span부터 출력됨

Capturing

- 버블링과 반대로 상위에서 하위요소로의 이벤트 전파 방식

-  addEventListener 의 3번째 인자가 true 일때 이벤트 전파 방식: capturing

EX 1

⇒ span이 맨 마지막으로 출력됨

event flow

(https://www.w3.org/TR/DOM-Level-3-Events/images/eventflow.svg 그림 참고)

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

⇒ event capture -> event target ->  event bubble

EX 1

EX 2

⇒ event target에 도달하면 어떤 종류의 리스너인지(capturing, bubbling)에 관계없이 등록된 순서대로 발생

event.stopPropagation()

- 이벤트 전파를 막음

EX 1

EX 2