capturing
-
자바스크립트 - 이벤트 버블링과 캡쳐링프론트엔드/JavaScript 2020. 10. 20. 10:37
자바스크립트에서 이벤트를 실행하면 버블링과 캡쳐링이란 것을 발생하게 할 수 있다. 간단하게 말하자면 이벤트가 발생 시 HTML 문서 구조상 이벤트가 다른 문서로 전이되는 것을 말한다. 코드를 살펴보자. 1. 캡쳐링과 버블링 캡쳐링과 버블링 위 코드를 살펴보자. 대략 그림으로 위 HTML문서의 구조를 나타내면 다음과 같다. 이때 여기서 버튼을 누르면 어떤 결과가 나올까? 다음과 같은 결과가 나온다. 버튼은 한번만 눌렀는데 결과값은 4개가 나온 것이다. HTML 문서의 각 노드들은 어딘가 종속되어있는 계층적 구조로 이뤄진다. 그래서 어느 한 곳에서 이벤트가 발생하면 다른 곳으로 이벤트가 전파된다. 그리고 이때 이 이벤트가 전파되는 방향에 따라 이것을 캡쳐링과 버블링이라고 부르는 것이다. 둘은 구분하면 다음과..