이벤트 캡쳐링

[JavaScript] 이벤트 버블링과 이벤트 캡쳐링을 알아보자

자바스크립트에서 이벤트를 전달하는 방식은 버블링, 캡쳐, 위임 방식이 있습니다. 이번 포스팅에서는 이벤트 버블링, 캡쳐링에 대해 알아보겠습니다. 이벤트 버블링 버블링은 거품이 커져가는 뉘앙스가 담겨 있습니다. 거품이 위로 많아지는 경우를 생각하면 이해하기 쉽습니다. 이벤트 버블링은 어떤 요소에 대해 이벤트가 발생했을 때, 해당 요소의 최상위 부모까지 이벤트가 전달되어지는 과정을 의미합니다. 예시를 하나 들어보겠습니다. 노란색은 son, 파란색은 parent, 빨간색은 grand-parent 부분입니다. 그리고 다음과 같은 js 소스코드가 있습니다. var grandParent = document.querySelector('.grand-parent'); var parent = document.querySe..