Detailed Explanation of JavaScript Event Bubbling and Event Capturing

(I) Event Binding

1.Binding common events

Add a specific attribute starting with 'on' to html (such as onclick, onfocus);

<button id="A" onclick="alert(this.id)">Method one</button>

<button id="A" onclick="handler(this)">Method two</button>
<script>
 function handler(btn){
 alert(this.id); //undefined this refers to the window object
 alert(btn.id); //A 
 }
</script>

<button id="A">Method three</button>
<script>
 var btn = document.getElementById("A");
 btn.onclick = function(){
 alert("1:"+this.id);
 }
 btn.onclick = function(){
 alert("2:"+this.id);
 }
 //Only one event handler can be bound, and the later ones will overwrite the earlier ones;
</script>

2.Complies with W3C standard event binding (addEventListener and removeEventListener)

target.addEventListener(type, listener[, useCapture]);

type:Required, a string representing the event type being listened to;

listener:Required, an event notification object will be received when the event type being listened to is triggered; listener must be an object that implements the EventListener interface, or a function;

useCapture:Optional, Boolean, default is false, indicating the event propagation mode is event bubbling; true, indicating the event propagation mode is event capturing;

(Event capturing and event bubbling will be explained later)

These two functions are supported by Firefox and Chrome, as well as IE9and later also support these two functions; IE uses attachEvent/detachEvent to bind and unbind events;

<button id="B">W3C standard one</button>
<script>
 var btn = document.getElementById("B");
 btn.addEventListener("click", handler, false);
 function handler(){
 alert(this.id); //B this refers to the dom object; attachEvent refers to the window object
 }
</script>

<button id="B">W3C standard two</button>
<script>
 var btn = document.getElementById("B");
 btn.addEventListener("click", handler, true);
 btn.addEventListener("click", handler, false);
 function handler(){
 alert(this.id); //B
 }
 //When the button is clicked, the function handler will execute2time, one for event capturing and one for event bubbling;
 //If the same event handler is bound, and both are event capturing or both are event bubbling, it can only be bound once;
</script>

3.IE browser uses attachEvent/detachEvent for event binding and unbinding

<button id="C">IE</button>
<script>
 var btn = document.getElementById("C");
 btn.attachEvent("click",handler);
 function handler(){
 alert(this.id); //undifined this refers to the window object; addEventListener refers to the dom object
 }
</script>

Note: The same event handling function can only be bound once; different function objects can be bound repeatedly without overriding; anonymous functions and anonymous functions are different from each other even if the code is completely the same;

(II) Event capturing and event bubbling

<div id="A">
 <div id="B">
 <div id="C"></div>
 </div>
</div>

Event capturing:It is the order of triggering from the outermost layer to the target object (as in the above code, if you click C, its triggering order is A→B→C)

Event bubbling:It is the order of triggering from the target object to the outer layer (if you click C, its triggering order is C→B→A)

DOM event flow:It supports two event models, capture event and bubble event, where the capture event occurs first; both event flows will affect all objects in the DOM, starting from the document object and ending with the document object.

Image from the internet:

<div id="A" style="width:300px; height:300px; background:red;position:relative;">
 <div id="B" style="width:200px;height:200px; background:green;position:relative;top:50px;margin:auto;">
 <div id="C" style="width:100px;height:100px; background:blue;position:relative;top:50px;margin:auto;"></div> 
 </div>
</div>
<script>
 var A = document.getElementById("A"); 
 var B = document.getElementById("B"); 
 var C = document.getElementById("C"); 
 // Target (the processing function of the target stage, executed first in the order of registration)
 C.addEventListener('click',function(){alert("Ct");},true);
 C.addEventListener('click',function(){alert("Cf");},false);
 // Event Bubbling
 A.addEventListener('click',function(){alert("Af");},false);
 B.addEventListener('click',function(){alert("Bf");},false);
 // Event Capture
 A.addEventListener('click',function(){alert("At");},true);
 B.addEventListener('click',function(){alert("Bt");},true); 
</script>
//When clicking C (blue), output At Bt Ct Cf Bf Af

Prevent the propagation of the event:

• In W3In c, use the stopPropagation() method

• Set cancelBubble = true; under IE;

Prevent the default behavior of the event:

• In W3In c, use the preventDefault() method;

• Set window.event.returnValue = false; under IE;

That's all for this article. I hope the content of this article can bring some help to everyone's learning or work, and I also hope to get more support for the Yell Tutorial!

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report abuse, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)