DOM 이벤트 흐름

트리 형태로 구성되는 DOM은 이벤트가 발생하면 부모에서 자식으로 자식에서 부모로 흘러간다.

이렇게 이벤트가 전파되는 방향에 따라 버블링 과 이벤트 캠처링으로 구분한다.

 

이벤트 흐름은 3단계로 구성된다. 첫번째는 캡처링 단계이고 두번째는 타겟팅 단계 그리고 마지막으로 버블링 단계입ㄴ다.

 

위 예제에서 보자면 일단은 최상위 노드인 window부터 시작하여 클릭한 대상인 <a> 요소 까지 이벤트가 내려온다. 그리고 이벤트 객체의 target에 도착하여 해당 이벤트 리스너를 호출하는 타겟팅 단계에 진입한다. 그 후 다시 최상위 노드까지 올라가는 버블링 단계를 거친다.