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 browser; 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 ("hit the last layer by 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;