이벤트 캡처링(Event Capturing)과 이벤트 버블링(Event Bubbling)

- 이벤트 캡처링(Event Capturing)

@ 여러 요소가 한 번의 클릭에 모두 반응하도록 하는 전략. 예를들어 div영역안에 span영역이 있고 그안 에 a태그가 있는 구조에서 a 태그가 클릭되면 <div>,<span>,<a> 태그 모두 클릭 이벤트에 응답할 수 있는 기회를 가진다.

@ 모든 것을 감싸고 있는 최상위 요소에게 이벤트가 처음으로 주어지고 그 후에 연속해서 하위 요소로 전달된다.(Capturing)

- 이벤트 버블링(Event Bubbling)

@ 이벤트 캡처링의 반대 방향으로 이벤트가 전파되는 것이 이벤트 버블링(Event Bubbling), 이벤트는 가장 낮은 자식 요소에 처음으로 전달되고 해당 요소가 반응한 후에 그 이벤트는 그 부모 요소로 전파된다. 즉 이벤트의 처리가 캡쳐링의 역순으로 이뤄짐

@ 버블링은 mouseover나 mouseout같은 이벤트에 대해 엉뚱한 요소가 응답을 할 수 있는 부작용을 내포하고 있다. 이러한 문제점은 jQuery의 hover()메서드에 의해 해결될 수 있다. hover()메서드는 버블링 문제를 고려하고 있어 실제 마우스 이벤트들을 직접 연결하는 것 보다는 hover()메서드를 사용하는 것이 바람직하다.(mouseenter()나 mouseleave()또한 버블링 문제를 해결할 수 있다)