파이어폭스에선 위에 두가지 이벤트를 제공한다.

첫번째 capturing 이벤트는 이벤트가 상위 노드부터 시작하여
하위노드로 내려가는 형식이다.

capturing


두번째 방식은 bubbling방식 이방법은 위에 capturing방식과 반대로
실행이 되는노드를 시작으로 상위노드로 올라가며 이벤트를 발생한다.

bubbling

이렇게 두가지의 이벤트가 있으며

 

document.getElementById("아이디").”이벤트” = “함수”;


위와 같이 일반적인 방식은 bubbling방식으로 작동한다.
그리고 capturing방식은 ie에선 작동을 하지 않는다.


만약 prototype.js에서 capturing방식을 사용하고 싶을때는
Event.observe(element, eventName, handler[, useCapture = false]);

위에 useCapture부분을 true로 바꾸어서 등록하면된다.

그리고 scriptaculous에서 drag&drop구현시 한노드가 여러 Droppables에 등록되어있고
해당 Droppables의 zone이 겹쳐있으면 하위 Droppables의 이벤트만 실행된다. 이점을
이용하면 보다 편리하게 장바구니를 구현할수 있다.물론 레이어가 겹쳐있어도 그중에 하나가  Droppables zone이면 Droppables의 이벤트는 실행된다.

혹,capturing 이나 bubbling을 하기 싫다면 ie에선 window.event.cancelBubble = true;
그이외는 event.stopPropagation() 으로 막을수 있다.

참고글:DOM Design Tricks II
Posted by 전용우
,