The event bubbling

The flow of events proposed by Microsoft is called event bubbling, which means that events propagate from the concrete elements at the beginning of the event up to less concrete nodes. Examples are as follows:

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

When we click on the P element, the event propagates like this:

1. p
2. div
3. body
4. html
5. document

Modern browsers support event bubbling, but IE9, Firefox, Chrome, and Safari bubble events all the way to the Window object.

Event capture

Another event stream proposed by the Netscape team is called event capture. It is the opposite of event bubbling; its intention is to catch the event before it reaches its intended destination, and the most specific node should receive the event last.

As in the previous example, when clicking on the P element, the event travels in this direction:

1. document
2. html
3. body
4. div
5. p

IE9, Firefox, Chrome, and Safari currently support this event stream model, but some older browsers don’t, so few people use event capture, instead bubbling with events a bit more.

The DOM event flow

The event flow specified by “DOM2-level events” consists of three phases: event capture phase, in target phase, and event bubbling phase.

Event capture, which occurs first, provides an opportunity to intercept events. Then there is the actual target acceptance event. The final phase is the time bubble phase, where events can be responded to. In the previous example, events are triggered in the following order.

In THE DOM event flow, the target of the event does not receive the event during the capture phase. This means that in the capture phase, the event stops after document to P.

The next phase is in the target phase, where events occur on P and are treated as part of the bubbling phase in event processing. Then, the bubble phase occurs, and the event propagates back to the Document.

Most browsers that support DOM event streaming implement a specific behavior; Even though the “dom2-level events” specification explicitly requires that the capture phase does not involve event targets, IE9, Safari, Chrome, Firefox, Opera9.5 and later all fire events on event objects during the capture phase. As a result, there are two opportunities to manipulate events on the target object

The third parameter to addEventListener

The event flow specified in DOM2-level events supports both the event capture phase and the event bubbling phase, and as developers we can choose which phase the event handler is invoked.

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

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

The event agent

In actual development, using the nature of event flow, we can use an approach called event broker.

<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;        
}
// Add a color to each li
.box{            
    width: 600px;            
    height: 150px;            
    background-color: #cccccc;            
    line-height: 150px;            
    text-align: center;        
}
Copy the code

We want to output the color (innerHTML) of each LI tag 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 done with a small number of Li’s, but with 10,000 Li’s, performance degrades (without traversing all li nodes, performance is definitely better).

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

function colorChange(e){                
    var e=e||window.event;// Compatibility handling
    if(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, after clicking Li, it will bubble to UL. At this time, the click event bound to UL will be triggered, and the expected effect can be achieved by using target to find the element where the event actually occurs.

The advantage of using an event broker is not only to reduce multiple event handlers to one, but also to have different handling methods for different elements. If other element nodes (a, SPAN, etc.) are added to the list elements above, we can simply modify the event handler of the event broker 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 characters.

(2) the nodeName property specifies the nodeName 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 property returns different names for different node types.

Bubble or capture?

There is no clear preference between event capture and event bubbling for event brokers, 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.

Prevents events from bubbling

1. Add event.stopPropagation() to child

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

Blocking default events

event.preventDefault( )