Javascript event bubbling and event capture _ javascript skills

Recently, I encountered some difficulties in learning javascript, such as bubbling and capturing. I have been mentioned many times, but I don't know where the application is. I have found some good articles to explain and share them with you here. Event bubbling and event capture are proposed by Microsoft and Netscape respectively. These two concepts are designed to solve the problem of event streams (event occurrence sequence) on pages.

  
Click me!

In the above Code, a p element contains a p sub-element. If both elements have a click processing function, how can we know which function will be triggered first?

To solve this problem, Microsoft and Netscape put forward two completely opposite concepts.

Event bubbling

Microsoft proposed an event stream called event bubbling. Event bubbles can be vividly compared to putting a stone into the water, and bubbles will always come out of the water. That is to say, the event will occur from the inner element until the document Object is propagated upwards.

Therefore, the sequence of click events in the above example is p-> body-> html-> document.

Event capture

Wangjing proposes another event stream named event capturing ). In contrast to event bubbling, events occur from the outermost layer until the most specific elements.

In the above example, the order of click events under the concept of event capture should be document-> html-> body-> p

The third parameter of addEventListener

The event stream specified in "DOM2-level events" supports both the event capture and event bubbling phases. As a developer, we can choose at which stage the event processing function is called.

The addEventListener method is a common method in JavaScript to bind an event handler to a specific element. AddEventListener has three parameters:

Element. addEventListener (event, function, useCapture)
The first parameter is the event to be bound, and the second parameter is the function to be executed after the event is triggered. The default value of the third parameter is false, indicating that the event processing function is called in the event bubbling stage. If the parameter is true, the processing function is called in the event capture stage. See the example.

Event proxy

In actual development, we can use a method called event proxy Based on the feature of event stream.

 
 
  
  
  
red
  
  
  
yellow
  
  
  
blue
  
  
  
green
  
  
  
black
  
  
  
white
 
 

If you click the li element on the page and then output the color of the li element, we usually write as follows:

The Code is as follows:

(Function (){
Var color_list = document. getElementById ('color-list ');
Var colors = color_list.getElementsByTagName ('lil ');
For (var I = 0; I Colors [I]. addEventListener ('click', showColor, false );
};
Function showColor (e ){
Var x = e.tar get;
Alert ("The color is" + x. innerHTML );
};
})();

With the feature of event stream, We can bind only one event handler function:

The Code is as follows:

(Function (){
Var color_list = document. getElementById ('color-list ');
Color_list.addEventListener ('click', showColor, false );
Function showColor (e ){
Var x = e.tar get;
If (x. nodeName. toLowerCase () = 'lil '){
Alert ('the color is '+ x. innerHTML );
}
}
})();

The benefit of using event proxy is not only to reduce multiple event handler functions into one, but also to have different processing methods for different elements. If other elements (such as a and span) are added to the list elements, you do not have to repeatedly bind events to each element and directly modify the event handler function of the Event Agent.

Bubble or capture?

For event proxies, there are no obvious advantages or disadvantages in event capture or event bubbling, but because event stream models of event bubbling are compatible with all mainstream browsers, from the compatibility perspective, we recommend that you use the event bubble model.

IE browser compatibility

Internet Explorer is not very compatible with addEventListener, and can only be used by IE9 or later.

To be compatible with earlier IE versions, you can use the attachEvent function of IE.

Object. setCapture ();
Object. attachEvent (event, function)
The two parameters are similar to addEventListener, which are event and handler functions. By default, the handler function is called in the event bubble stage. Note that, add the "on" prefix ("onload", "onclick", etc.) to the event name ).

The above is all the content of this article. I hope you will like it.