Created by Howard.Zuo / @leftstick
/ \ ---------------------| |--------------------- | element1 | | | | -----------------| |---------------- | | |element2 | | | | | | -------------| |------------ | | | | |element3 | | | | | | | ---------------------------- | | | ------------------------------------ | | Event BUBBLING | ---------------------------------------------
The event handler ofelement3
fires first, the event handler ofelement1
fires last
| | ---------------------| |-------------------- | element1 | | | | -----------------| |-------------- | | |element2 | | | | | | -------------| |---------- | | | | |element3 \ / | | | | | -------------------------- | | | ---------------------------------- | | Event CAPTURING | --------------------------------------------
The event handler ofelement1
fires first, the event handler ofelement3
fires last
| | / \ --------------------| |--| |-------------------- | element1 | | | | | | ----------------| |--| |-------------- | | |element2 | | | | | | | | ------------| |--| |--------- | | | | |element3 \ / | | | | | | | ----------------------------- | | | -------------------------------------- | | W3C event model | ------------------------------------------------
W3C has very sensibly decided to take a middle position in this struggle. Any event taking place in the W3C event model is first captured until it reaches the target element and then bubbles up again.
target.addEventListener(type, listener[, useCapture]);
Param | Type | Detail |
---|---|---|
type | string | A string representing the event type to listen for |
listener | function | The object that receives a notification when an event of the specified type occurs. This must be an object implementing the EventListener interface, or simply a JavaScript function |
useCapture | boolean | If true, useCapture indicates that the user wishes to initiate capture. After initiating capture, all events of the specified type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree. Events which are bubbling upward through the tree will not trigger a listener designated to use capture. See DOM Level 3 Events and JavaScript Event order for a detailed explanation. If not specified, useCapture defaults to false |
target.attachEvent(event, handler);
Param | Type | Detail |
---|---|---|
event | string | A string representing any of the standard DHTML Events, case-insensitive. Must have 'on' as prefix, For example: onclick |
handler | function | The handler function |
Calling preventDefault during any stage of event flow cancels the event, meaning that any default action normally taken by the implementation as a result of the event will not occur
Returningfalse
from an event handler will automatically callevent.stopPropagation()
andevent.preventDefault()
. Afalse
value can also be passed for thehandler
as a shorthand forfunction(){ return false; }
. So, $( "a.disabled" ).on( "click", false ); attaches an event handler to all links with class "disabled" that prevents them from being followed when they are clicked and also stops the event from bubbling