Let's talk about js capture and bubbling from a simple example, and talk about js capture and bubbling.

Let's talk about js capture and bubbling from a simple example, and talk about js capture and bubbling.

Event bubbling and event capture. Below is an example of capturing and bubbling in js:
Html structure:

<div id="tianzi">    <div id="tianzi1">        <div id="tianzi2">            <div id="tianzi3">            </div>        </div>    </div></div>

Css style control:

#tianzi{    width: 400px;    height: 400px;    background: red;}#tianzi1{    width: 300px;    height: 300px;    background: yellow;}#tianzi2{    width: 200px;    height: 200px;    background: green;}#tianzi3{    width: 100px;    height: 100px;    background: blue;}

Js section:

Window. onload = function () {var xtianzi = document. getElementById ("tianzi"); var xxtianzi = document. getElementById ("tianzi1"); var xxxtianzi = document. getElementById ("tianzi2"); var xxxxtianzi = document. getElementById ("tianzi3"); var f = function () {alert ("message")} document. addEventListener ("click", function () {alert ("You clicked document") ;}, false); document. body. addEventListener ("click", function () {alert ("You clicked body") ;}, false); xtianzi. addEventListener ("click", function () {alert ("You clicked a large box") ;}, false); xxtianzi. addEventListener ("click", function () {alert ("You clicked a small box") ;}, false); xxxtianzi. addEventListener ("click", function () {alert ("You clicked the 200 box") ;}, false); xxxxtianzi. addEventListener ("click", f, false); xxxxtianzi. removeEventListener ("click", f, false );}

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.

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

In the above Code, a div 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-> div-> 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-> div-> 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.

<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 the li element on the page and then output the color of the li element, we usually write as follows:

(function(){    var color_list = document.getElementById('color-list');    var colors = color_list.getElementsByTagName('li');    for(var i=0;i<colors.length;i++){                          colors[i].addEventListener('click',showColor,false);    };    function showColor(e){        var x = e.target;        alert("The color is " + x.innerHTML);    };})();

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

(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 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.

AddEventListener compatibility

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

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" and "onclick") to the event name ).