[DOM/Tutorial] DOM 의 event flow. ( Capture, Bubble )

참조 : w3.org 공식 홈페이지

DOM 의 event flow.

DOM 의 event 는 Root Node에서부터 Target 노드로, 그리고 다시 Root Node 로 돌아온다.

이 Event 의 순환에는 phase 가 있는데

Root 에서 Target Node 까지 Event가 흘러가는 것을 Capture Phase.

Target 에서의 Event 를 Target Phase.

그리고 Target 에서 Root Node 로 다시 돌아오는 것을 Bubbling Phase 라고 한다.

이미지 출처 : http://www.w3.org/

* addEventListener 를 걸 때, 세번째 인자인 useCapture 를 true 로 주게 되면,

  capturingPhase 시에 callback function 이 호출되고, 반대로 useCapture를 false 로 주게 되면

  bubblingPhase 시에 callback function 이 호출된다.