위와 같은 경우가 있다고 하자.
JS 이벤트는 자신이나 자신의 자식 요소들이 해당 이벤트를 일으켰을 때 실행된다. 즉 body에 할당된 이벤트는 body의 모든 요소에도 적용되는 것이다.
a()는 A,B,C,D를 클릭했을 때 실행된다.
b()는 B,C,D 위에 커서를 놓았을 때 실행된다.(설령 D가 B 바깥에 있더라도!)
c()는 C,D를 클릭했을 때 실행된다.
그렇다면 Bubbling, Capturing이라는 건 무엇인가? 간단히 말해 이벤트 감지 순서가 자식요소에서 부모요소로 거슬러 올라가는지, 아니면 그 반대인지 정해주는 것이다.
Bubbling은 말그대로 거품이 부풀어오르듯 자식요소부터 부모요소로 거슬러 올라가며 범위가 넓어진다. 반대로 Capturing은 자식요소의 가장 최상위 부모요소(보통 body)부터 이벤트를 실행시킨다.
D를 클릭하면 버블링일 경우 c()가 실행된 후 a()가 실행된다. 캡쳐링일 경우 반대이다.
페이스북 댓글