Javascript Event Bubbling 및 capture

JavaScript 이벤트 버블링과 이벤트 캡처링 차이

컵에 들어 있는 탄산음료(사이다 같은)의 기포가 아래에서 위로 올라가는 것과 같이 DOM의 자식 요소로부터 부모 요소로 올라오며 이벤트 핸들러가 실행되는 것을 이벤트 버블링이라고 한다.
반대로 DOM의 부모 요소에서 발생한 이벤트가 자식 요소로 내려가며 이벤트 핸들러가 실행되는 것을 이벤트 캡처링이라 한다.

다음 코드와 같이 구성된 HTML에서 이벤트 버블링일 경우에는 IMG 요소에 이벤트가 발생한 후 A 요소에 이벤트가 발생한다. 반명 이벤트 캡처링일 경우에는 A 요소에 이벤트가 발생하고 IMG 요소에 이벤트가 발생한다.

<a>
    <img>
    <span>
    ...
</a>