[ JS ] 이벤트 흐름을 이해해보자 ( Event Bubbling & Capturing )
·
Language/JavaScript
이벤트 버블링 ( Event Bubbling )이벤트 버블링이란 한 요소에 이벤트가 발생되면, 그 요소의 부모 요소의 이벤트도 같이 발생되는 이벤트 전파를 말한다. 왼쪽 그림에서처럼 가장 깊게 중첩된 요소 (3)에 이벤트가 발생했을 때 이벤트가 위로 (bubble up) 전파되어버린다.그래서 3번 요소, 2번 요소, 1번요소에 그 이벤트에 대한 핸들러가 있다면 3번 요소에 핸들러가 실행되고 2번 요소에 핸들러, 1번요소에 핸들러 순으로 실행된다. 코드를 통해 살펴보면, 아래 3개가 중첩된 박스 영역에서 가장 자식 엘리먼트인 박스를 클릭하면 onclick 이벤트 스크립트가 뿐만 아니라 그의 부모인 와 엘리먼트도 발생함을 볼 수 있다. FORM DIV P  See t..