Event Capturing, Event Bubbling

서론

js에서는 html에서 발생하는 event를 인식할 수 있는 event handler가 있다.
이 때, event handler가 event를 인식할 때, 특별한 형태로 event가 발생하게 되는데, 이에 대해 알아보자.

Event Bubbling, Capturing

다음과 같은 html이 있을 경우에, 밑과 같이 event가 일어난다.

출처

1. 우선 Event Capturing이라는 것이 일어나는데, 최상단 요소에서 클릭한 요소로 찾아가는 과정을 의미합니다. 이 과정에서, 이벤트가 따로 발생된다거나 그런 것은 없습니다.

2. 그 이후에, 클릭한 요소에서 이벤트가 발생합니다. 여기서 등록한 event handler가 실행됩니다.

3. 그 이후에는 Event Bubbling 이 일어납니다. Event Bubbling이 일어나면 클릭한 요소에서 점점 최상위 요소로 이벤트가 전파되는데 이 때 이벤트가 전파된 요소들의 이벤트 핸들러가 작동한다.