JavaScript event bubbling and event capture detailed

Some of the most recent difficulties in learning JavaScript, such as bubbling and capturing, have been mentioned many times, but I don't know where to apply it. Found some good Article FAQ, here to share with you.

Event bubbling and event capture were presented by Microsoft and Netscape, both of which were designed to address the issue of the event flow (sequence of events) in the page.

?

1 2 3

<div id= "outer" > <p id= "inner" >click me!</p> </div>

A DIV element in the above code has a P child element, and if two elements have a click handler, how do we know which function will be triggered first?

In order to solve this problem, Microsoft and Netscape have put forward two concepts that are almost completely opposite to each other.

Event bubbling

Microsoft has presented an event stream called event bubbling. Event bubbling can be figuratively likened to putting a stone into the water, and bubbles will always emerge from the bottom. That is, the event takes place from the most inner element and is propagated up until the document object.

So the above example occurs in the event bubbling concept the order of click events should be P-> Div-> body-> HTML-> document

Event capture

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

The above example occurs under the concept of event capture the order of click events should be document-> HTML-> body-> div-> P

AddEventListener's third argument

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

The AddEventListener method is used to bind an event handler function for a particular element, which is a common method in JavaScript. AddEventListener has three parameters:

Element.addeventlistener (event, function, Usecapture)

The first parameter is the event that needs to be bound, and the second parameter is the function to be executed after the event is triggered. The third parameter defaults to False, which means that the event handler function is invoked during the event bubbling phase, and if the argument is true, the handler function is called during the event capture phase. Take a look at the example.

Event Agent

In the actual development, using the characteristics of the event flow, we can use a method called the event agent.

?

1 2 3 4 5 6 7 8

<ul id= "Color-list" > <li>red</li> <li>yellow</li> <li>blue</li> <li >green</li> <li>black</li> <li>white</li> </ul>

If you click on the LI element in the page and then output the color in Li, we usually write this:

The code is as follows:

(function () {

var color_list = document.getElementById (' color-list ');

var colors = color_list.getelementsbytagname (' li ');

for (Var i=0;i

Colors[i].addeventlistener (' click ', Showcolor,false);

};

function Showcolor (e) {

var x = E.target;

Alert ("The color is" + x.innerhtml);

};

})();

With the nature of the event flow, we can only bind an event handler function to complete:

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.target;

if (x.nodename.tolowercase () = = = ' Li ') {

Alert (' The color is ' + x.innerhtml);

}

}

})();

The benefit of using event proxies is not only to reduce multiple event handlers to one, but also to have different processing methods for different elements. If you add other elements (such as a, span, etc.) to the list element above, we do not have to iterate over each element to bind the event again, and modify the event handler function directly.

Bubbling or capturing?

For event agents, there is no obvious advantage in event capture or event bubbling, but because event-bubbling event flow models are compatible with all major browsers, the event bubbling model is recommended from a compatibility standpoint.

IE Browser compatible

IE browser for addeventlistener compatibility is not too good, only IE9 above can be used.

To be compatible with older versions of IE browsers, you can use the attachevent function of IE

Object.setcapture ();

Object.attachevent (event, function)

Two parameters are similar to AddEventListener, respectively, events and processing functions, the default is the event bubbling phase call processing function, note that the write event name to add "on" prefix ("onload", "onclick", etc.).

The above mentioned is the entire content of this article, I hope you can enjoy.