Introduction to the event mechanism of JavaScript

JavaScript events exist in the form of a stream. An event will have multiple elements responding at the same time. These include capture events (not IE) and bubble events (supported by all browsers ).
Capture events are top-down, while bubble events are bottom-up. The following figure shows the details:

1. Capture events:

<喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHByZSBjbGFzcz0 = "brush: java;"># Div1 # div2<Script> var a = document. getElementById ('div1 '); var B = document. getElementById ('div2');. addEventListener ('click', alertID, true); B. addEventListener ('click', alertID, true); function alertID () {alert (this. id) ;}</script>
The two elements with the id of div1 and div2 are bound to the event handler function in the capture phase:
When you click # div1 (Red area), alert should output "div1". When you click # div2 (yellow area), alert should output "div1" first ″, then alert generates "div2", because in the event capture phase, the event is propagated downward from the root element, # div1 is # div2's parent element, the click event bound to # div1 is also executed before the click Event on # div2.

2. Bubble events:
A typical example:

<Script type = "text/javascript"> var I = 1; function Add (sText, objText) {document. getElementById ("Console "). innerHTML + = sText + "execution sequence:" + I +"
"+"
 "; I = I + 1; // window. event. cancelBubble = true ;}</script>', 'Div') ">
Click

Result:

Reference: http://www.nowamagic.net/javascript/js_EventAnalysis.php