The bubbling event and capture event in JS

The bubbling event and capture event in JS:

Bubbling event: The bubbling event is triggered from the inside out, that is, all ancestor elements that reach the page from the beginning of the bound element, are called event bubbling. This event bubbles to the top of the DOM tree from the beginning of the original element.

Capture event: The capture event is triggered from the topmost layer of the page to the bound element.

IE only supports event bubbling and does not support event capture

The direction of the bubbling event and the capture event is reversed.

The form is as follows:

There are generally 2 ways to bind an event to an element in the browser:

First, binding directly in the page element, in this way, using a bubbling sort, such as:

<div id= "Eventexample" onclick= "alert (' Bind events directly on element ')" ></div>

Second, through the way of JS for the element binding event, such as:

var eventObj = document.getElementById ("eventexample");  elem.attachevent ("onclick", function () {}) is used in IE, eventobj.attachevent ("onclick",function() {});  Use Elem.addeventlistener ("click", Function () {},boolean) Eventobj.addeventlistener ("click") in other browsers, function () {},false);        

AddEventListener (event type, triggered function, whether captured): If the last argument is true, the capture event is used, or if the last parameter is False, the bubbling event is used.

<div id= "event_1" onclick= "alert (' Top ')" >    <span id= "event_2" onclick= "alert (' middle layer ')" >        <a id= " Event_3 "href=" http://www.baidu.com "onclick=" alert (' last Layer ') ' > Last layer </a>    </span>        </div ><script>var event_3 = document.getElementById ("Event_3"); Event_3.addeventlistener ("click",  function() {    alert ("The last layer was hit by a binding point");},false);</script>     

In the process of executing the above code, if you click on "Last Layer", the first one will pop up "last Layer", then pop "hit the last layer by binding", then pop "middle layer", finally "top",

As can be seen from this execution order, the bubbling event is performed outside of the inside, and during execution, the events that are directly bound to the element are higher in priority than the time that is bound by JS.

When it comes to bubbling events, it involves organizing bubbles:

1.event.stoppropagation ();

<div id= "event_1" onclick= "alert (' Top ')" >    <span id= "event_2" onclick= "alert (' middle layer ')" >        <a id= " Event_3 "href=" http://www.baidu.com "onclick=" alert (' last Layer ') ' > Last layer </a>    </span>        </div ><script>var event_3 = document.getElementById ("Event_3"); Event_3.addeventlistener ("click",  function(event) { event.stoppropagation ();},false);</script>     

Add Event.stoppropagation () to the code binding, and the result is: Pop "last Layer" and jump to "Baidu".

2.event.preventdefault (); Prevent execution of the default event for an element

If you put event.stoppropagation () in the code above, change to Event.preventdefault (), the execution result becomes: "Last Layer"----> "middle tier"-----> "Topmost", and then does not jump to " Baidu

3.return false;

/************************** Additional Knowledge *********************************/

1. Event Events:

function ShowMsg (event) {  event = Event | | window.event;  IE and chrome under window.event FF is e}

2. Ways to cancel the default behavior of an event:

function Preventdefaulthandler (event) {  event = Event | | window.event;  if (event.preventdefault) {     event.preventdefault ();           } else{     event.returnvalue=false;//ie use          }}

3. Block Bubbling Events

function Stoppropagationhandler (event) {  event = Event | | window.event;  if(event.stoppropagation) {    event.stoppropagation ();      } elsetrue;  // } }

4. Get the event source

function Eventsrc (event) {  event = Event | | window.event;  var target = Event.target | | event.srcelement; //IE and chrome under srcelement FF is target}    

5. If you have a large table with a lot of rows, it is a very dangerous idea to have a fixed-point hit at each <tr>, because performance is a big problem. The popular practice is to use event delegates.

An event delegate describes an event that is bound to a container element and then triggered by judging the type of the target child element that is clicked.
The event delegate relies on event bubbling, and the following code will not work if it is disabled before the event bubbles to the table.

function () {  e = e | | window.event;  var targetnode = E.target | | e.srcelement;  //if (targetNode.nodeName.toLowerCase () = = = ' TR ') {alert (' You clicked a table row! '