jquery event propagation, event flow

I. jquery event dissemination

In the DOM2-level event model, once an event is triggered. The event stream is first propagated down from the top of the DOM tree (the document node). Until the target node. It then propagates upward from the target node to the top of the DOM tree. The process from top to bottom is called the capture phase. The process from bottom to top is called the bubbling phase.

A capture mouse Click class event handler for the button element and all of its parent nodes, respectively, using the loop body structure.

Sample Code Demo:

<! DOCTYPE html>
The following changes are made to the 3rd parameter of the AddEventListener () method, setting the value to False, that is, the register event is a bubbling handler.
<script type= "Text/javascript" >    window.onload = function () {        var btn = document.getElementsByTagName (" Input ") [0];//Gets the button        var p = document.getelementsbytagname (" P ") [0];//p element        var i = 1;//declare and initialize a transient variable        do{// Use the Do loop structure to register the mouse click event            btn.addeventlistener ("click", Function () {//Register mouse click event                p.innerhtml + = "<br/> ("  + i++ + ")  "  + this.nodename;        },false);//Dynamically track the name of the current response node                this.removeeventlistener ("click", Arguments.callee,false);//Unregister the current mouse click event            btn = Btn.parentnode;//access to the parent element        } while (BTN);//Set the loop condition, assuming the parent node exists    }</script>

Two. jquery Event flow
 Sample code Demo:
<! DOCTYPE html>





 
jquery event propagation, event flow