Event Bubbling

이벤트 버블링이란 아래 그림에서 처럼 가장 깊게 중첩된 요소 (3)에 이벤트가 발생했을 때 이벤트가 위로(bubble up) 전달 되는 것을 의미합니다.
그래서 3번 요소, 2번 요소, 1번 요소에 그 이벤트에 대한 핸들러가 있다면 3번 요소에 핸들러가 실행되고 2번 요소에 핸들러 1번 요소에 핸들러 순으로 실행됩니다.

p 핸들러 -> div 핸들러 -> form 핸들러

Bubbling 중단하기

이벤트 버블링은 타깃 이벤트에서 시작해서 요소를 거쳐 document 객체를 만날 때까지 각 노드에서 모두 발생합니다. 몇몇 이벤트는 window 객체까지 거슬러 올라가기도 합니다. 이 때도 모든 핸들러가 호출됩니다. 그런데 핸들러에게 이벤트를 완전히 처리하고 난 후 버블링을 중단하도록 명령할 수도 있습니다.
그러기 위해서는 event.stopPropagation() 메소드를 사용하면 됩니다.
event bubbling이 발생하지 않기에 부모 요소들의 핸들러도 호출이 되지 않게 됩니다.