Event Bubbling

중첩된 요소에 이벤트 발생 시 이벤트가 위로 전달 되는 것

타깃 이벤트에서 시작해 요소를 거쳐 document객체 만날 때 까지 각 노드에서 모두 발생

몇 이벤트는 window객체까지 거슬러 올라가기도 함

3번에 이벤트 발생하고, 3번, 2번, 1번에 이벤트에 대한 핸들러가 있다면

3 -> 2 -> 1 순으로 핸들러 실행

---

이렇게 구성이 되어있고, p태그에 이벤트 발생한다면

p -> div -> form 순으로 핸들러가 발생함

결과로 화면에는 전체가 배경색이 yellow로 변한다.

allert 같은 경우 p태그 먼저 나오고, div와 form 순으로 태그이름이 나온다.

*event.target : 실제 이벤트 시작된 타깃 요소

*this : '현재' 요소, 현재 실행 중인 핸들러가 할당된 요소 참조

---

Bubbling 중단

event.stopPropagation()

핸들러에게 이벤트 처리 후 버블링 중단하도록 명령 가능

p 태그 요소를 클릭 시 이벤트 버블링이 발생x

부모 요소들의 핸들러 호출 x