<div id="div1" style="width:500px; height:300px; background:magenta;">
div1
<div id="div2" style="width:400px; height:200px; background:cyan;">
div2
<div id="div3" style="width:300px; height:100px; background:orange;">
div3
</div>
</div>
</div>
여기 div의 영역을 클릭하면 div의 이름이 담긴 alert 창이 나오는 이벤트 핸들러가 있다고 생각해보자.
div1, div2, div3에 각각 동일한 핸들러를 바인딩했고, 사용자가 div3의 영역을 눌렀을 때
alert창에는 어떤 순서로 div 이름이 출력될까?
캡쳐링과 버블링은 쉽게 말해서 어떤 한 태그에서 이벤트가 발생하였을 때 자신을 포함한 부모 태그들까지 쭉 훑으며 겹치는 이벤트의 핸들러가 있는지 없는지 검사하는 것을 의미한다.
먼저 캡쳐링은 이벤트가 발생한 요소를 포함하는 부모 태그에서부터 이벤트 근원지인 자식 태그까지 검사하는 것을 의미한다. 그 과정에서 이벤트 캡쳐링 속성의 이벤트 핸들러가 있다면 핸들러를 수행한다. 버블링은 이벤트 발생 요소부터 요소를 포함하는 부모요소까지 올라가며 이벤트를 검사하는 것을 의미한다. 마찬가지로 이벤트 버블 속성의 핸들러가 등록되어 있으면 수행한다.
위의 예제에서, 핸들러가 모두
캡쳐링(true) 값이 적용된 경우) div1 > div2 > div3
버블링(false) 값이 적용된 경우) div3 > div2 > div1
순서대로 alert 창이 띄워질 것이다.
