Standard events defined by the DOM2.0 on the

The DOM2.0 model divides the event processing process into three phases:

First, the event capture phase,

Second, the objective stage of the event,

Third, the event blistering stage.

Specific (image from the network, Invasion and deletion)

Event capture: When an element triggers an event (such as an onclick), the top-level object document emits an event stream as the DOM tree's node flows to the target element node until it reaches the target element that the event actually occurs. In this process, the corresponding listener function of the event is not triggered.

Event target: When the target element is reached, the corresponding handler function is executed for the event of the target element. If the listener function is not bound, it is not executed.

Event bubbling: Starts at the target element and propagates toward the top level element. On the way, if a node is bound to a corresponding event handler, these functions are triggered at once. If you want to block event blistering, you can use E.stoppropagation () (Firefox) or e.cancelbubble=true (IE) to organize the bubbling propagation of events.

Explanation: For example: Ul,li,p,a are bound to a click event that is clicked and then executed to pop up their nodename

If it is a binding in capture mode, the pop-up sequence is: UL, Li-A.

If the binding is in bubbling mode, then the pop-up sequence is: A-P, Li---ul.

Chrome and FF the browser's event mode is bubbling

the event mode of IE browser is the capture

The above is a description of the event,

The AddEventListener () function in the standard, which means that the last parameter in false represents bubbling, and true is capturing, what does that mean? Because it is a standard, it chooses a relatively eclectic solution to deal with events, That is, any event that occurs in the event model is first entered into the capture phase, and then in the bubbling phase, ensuring that an event goes through both phases to accommodate IE and other non-ie browsers, so that the user can choose which stage to register the event on demand

Here's the code:

　　

<ul id= "ul" > <li id= "li" > <p id= "P" > <a id= "a" href= "#" &GT;AAAAAAAAAAAAAAAAAAAAA Aaaaaaaaaaaaaa</a> </p> </li></ul>//This is the JS code    varUL = document.getElementById (' ul ')); varLi = document.getElementById (' li '); varp = document.getElementById (' P '); varA= document.getElementById (' a '); Ul.addeventlistener (' Click ',function(e) {Console.log ("UL"); },true); Li.addeventlistener (' Click ',function(e) {Console.log ("Li"); },true); P.addeventlistener (' Click ',function(e) {Console.log ("P"); },true); A.addeventlistener (' Click ',function(e) {Console.log (A); },true);

Here is the result of the execution:

Capture:

Bubble:

Standard events defined by the DOM2.0 on the