Do you really understand event bubbling and event capture?

1. Event bubble and event capture

Event bubbling and event capture were introduced by Microsoft and Netscape, respectively, to solve the problem of the flow of events (the order in which events occur) on a page.

<div id="outer">
    <p id="inner">Click me! </p> </div>Copy the code

In the above code, a div element has a p child. If both elements have a click handler, how do we know which function will fire first?

To solve this problem, Microsoft and Netscape came up with two almost opposite concepts.

The event bubbling

Microsoft has come up with a stream of events called Event Bubbling. The event bubble can be figuratively likened to dropping a stone into water, and the bubble will keep rising from the bottom to the surface. That is, events start at the innermost element and propagate all the way up to the Document object.

So the above example should be in the order in which click events occur under the concept of event bubbling

Event capture

Netscape proposes another event stream called event capturing. Instead of bubbling events, events occur from the outermost layers up to the most concrete elements.

The above example should occur in the order in which click events occur under the concept of event capture

Event bubble and event capture process diagram:

1-5 is the capture process, 5-6 is the target stage, 6-10 is the bubble stage;

The third argument to addEventListener

The event flow specified in “DOM2 events” supports both the event capture phase and the event bubble phase, and as developers, we can choose which phase the event handler is called.

The addEventListener method is commonly used in JavaScript to bind an event handler to a specific element. AddEventListener takes three arguments:

 element.addEventListener(event, function, useCapture)Copy the code

parameter	describe
event	Must be. A string specifying the event name. Note:Don’t use the “on” prefix. For example, use “click” instead of “onclick”. Tip:All HTML DOM events can be viewed in our completeHTML DOM Event object reference manual.
function	Must be. Specifies the function to execute when the event is fired. When the event object is passed to the function as the first argument. The type of event object depends on the particular event. For example, the “click” event belongs to the MouseEvent object.
useCapture	Optional. A Boolean value specifying whether the event is executed during the capture or bubble phase. Possible values: True – the event handle executes during the capture phase (that is, the handler is called during the capture phase) False – false- Default. The event handle executes in the bubbling phase (that is, the event handler is called during the event bubbling phase)

3. Event agent

In real development, taking advantage of the event flow feature, we can use an approach called event proxy.

<ul class="color_list">        
    <li>red</li>        
    <li>orange</li>        
    <li>yellow</li>        
    <li>green</li>        
    <li>blue</li>        
    <li>purple</li>    
</ul>
<div class="box"></div>Copy the code

.color_list{ display: flex; display: -webkit-flex; } .color_list li{ width: 100px; height: 100px; list-style: none; text-align: center; line-height: 100px; }.box{width: 600px; height: 150px; background-color:#cccccc;            
    line-height: 150px;            
    text-align: center;        
}
Copy the code

We want to print out the color (innerHTML) in each li when we click on it. The general practice is to iterate through each li and bind a click event to each li:

var color_list=document.querySelector(".color_list");            
var colors=color_list.getElementsByTagName("li");            
var box=document.querySelector(".box");            
for(var n=0; n<colors.length; n++){ colors[n].addEventListener("click".function(){                    
        console.log(this.innerHTML)                    
        box.innerHTML="The color is"+this.innerHTML; })}Copy the code

This can be used when there are fewer Li’s, but if there are 10,000 Li’s, it will result in performance degradation (less traversal of all li nodes, and definitely better performance).

This is where the event broker comes in. Using the event flow feature, we can do this by binding only one event handler:

functioncolorChange(e){ var e=e||window.event; // Compatibility handlingif(e.target.nodeName.toLowerCase()==="li"){                    
        box.innerHTML="The color is"+e.target.innerHTML;                
    }                            
}            
color_list.addEventListener("click",colorChange,false)Copy the code

Due to the event bubbling mechanism, clicking li will bubble to UL, which will trigger the click event bound to UL, and then use target to find the element where the event actually occurred to achieve the desired effect.

The benefit of using an event proxy is not only that you can reduce multiple event handlers to one, but that you can have different handling methods for different elements. If we add other element nodes to the list (a, span, etc.), we can simply modify the event handler of the event agent rather than loop through each element again.

(1) the toLowerCase() method is used to convert a string toLowerCase. Grammar: stringObject toLowerCase ()

Return value: a new string in which all uppercase characters of stringObject are converted to lowercase.

(2) The nodeName attribute specifies the name of the node. If the node is an element node, the nodeName attribute returns the label name. If the node is an attribute node, the nodeName attribute returns the name of the attribute. For other node types, the nodeName attribute returns different names for different node types.

All major browsers support the nodeName attribute.

Bubble or capture?

For event agents, there is no obvious advantage or disadvantage in event capture or event bubbling processing, but since the event bubbling event flow model is compatible with all major browsers, it is recommended to use the event bubbling model from a compatibility perspective.

Internet Explorer compatible

Internet Explorer for addEventListener compatibility is not too good, only Internet Explorer 9 above can use.

To be compatible with older versions of Internet Explorer, use the attachEvent function of Internet Explorer

object.attachEvent(event, function)

The two arguments are similar to addEventListener, the event and the handler. The default is to call the handler during the event bubble. Note that the event name is prefixed with “on” (“onload”, “onclick”, etc.).

Prevent event bubbling

$("#div1").mousedown(function(e){
    var e=event||window.event;
    event.stopPropagation();
});Copy the code

Return false in the event handler

$("#div1").mousedown(function(event){
    var e=e||window.event;
    return false;
});Copy the code

But there is a difference. Return false not only stops the event from bubbling up, but also stops the event itself (the default event). Event.stoppropagation () only prevents events from bubbling up, not the events themselves.

Event. Target ==event. CurrentTarget, which makes the element that triggers the event equal to the element that binds the event.

Prevent default events

(2) Return false

Thank you for your reading, there are deficiencies for me to point out!