Event Bubbling and Capturing (事件冒泡與事件捕獲) Back
Both event bubbling and capturing are two ways of event propagation(事件傳播) in the HTML DOM APIs, when an event occurs in an element inside another element, and both elements have registered a handle for that triggered event.
Bubbling
Bubbling means that the event is first captured and handled by the inner element and then propagated to the outer one.
- IE 5.5: div -> body -> document
- IE 6.0: div -> body -> html -> document
- Mozilla 1.0: div -> body -> html -> document -> window
Notice that: blur
, focus
, load
and, unload
won't have event bubbling
Capturing
Capturing means that the event is first captured by the outer element and propagated to the inner one.
Capturing is also called "trickling(滴落)", which helps to remember:
trickle down, bubble up
Notice that: capturing is not supported by IE
Useage
/**
* useCapture is an boolean option
* true: for capturing
* false: for bubbling
*/
ele.addEventListener('click', function () {
}, [useCapture]);
And how to prevent from event propagation:
/** prevent from propagating */
ele.addEventListener('click', function (evet) {
event.stopPropagation();
}, [useCapture]);
/** In IE */
ele.attachEvent('onclick', function () {
window.event.cancelBubble = true;
});
/** prevent the default event */
ele.addEventListener('click', function (event) {
event.preventDefault();
}, [useCapture]);
/** In IE */
ele.attachEvent('onclick', function () {
window.event.returnValue = false;
});