JavaScript event bubbling is me·Picture and text examples

1. Events

In the browser client application platform, basically everything is event-driven, that is, an event occurs, and then corresponding actions are taken.

Browser events represent signals that something has happened. The explanation of the event is not the focus of this article. Friends who have not yet understood it can visit the W3school tutorial to learn more. This will help to better understand the following content.

2. Bubble mechanism

What is bubbling?

The following picture should be fulfilled. The bubbles start from the bottom of the water, from deep to shallow, rising to the top. On the way up, the bubbles pass through different depth levels of water.

Correspondingly: this bubble is equivalent to the event here, and the water is equivalent to our entire dom tree; events go up from the bottom layer of the dom tree. Passed until it is passed to the root node of the dom.

Simple case analysis

The following is a simple example to illustrate the principle of bubbling:

Define an html with three simple doms in it Elements: div1, div2, span, div2 contains span, div1 contains div2; and they are all under the body:

##? 1 2 3 4 5 6 7 "body" > "box1" class= "box1" > "box2" class= "box2" > "span" >This is a span.&lt ;/span> The interface prototype is as follows:

Add click event monitoring to the body. When the body captures the event event, print out the time when the event occurred and the node information that triggered the event:

?

1 2 3 4 5 6 7 8 "text/javascript" > window.onload = function () { document.getElementById( "body" ).addEventListener( "click" ,eventHandler) ; } function eventHandler(event) { console.log( "Time:" + new Date(event.timeStamp)+ " The node that generated the event: " + event.target.id + " The current node: " +event.currentTarget.id); } ## When we click "This is span", div2, div1, and body in sequence, the following information is output:

Analysis of the above The result:

Whether it is body, body's sub-element div1, div's sub-element div2, or span, when these elements are clicked, a click event will be generated, and the body will capture it, and then Call the corresponding event handler function. Just as bubbles in water rise from the bottom up, so do events. The schematic diagram of

is shown in the following:

## Generally, there will be some information in the transmission process. These are part of the incident: the incident: the incident The time of occurrence + the location of the event + the type of the event + the current handler of the event + other information,

The complete html code is as follows:

? ##1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 ## ## ## "UTF-8" > "text/javascript" src= "js/jquery-1.11.0.js?1.1. 11" > ## Insert title here "text/css" > .box1 { border: green 40px solid; width: 300px; height: 300px; margin: auto; } .box2 { border: yellow 40px solid; width: 220px; height: 220px; margin: auto; } span { position: relative; left: 50px; top: 50px; } "text/javascript" > window.onload = function () { document.getElementById( "body" ).addEventListener( "click" ,eventHandler); } function eventHandler(event) { console.log( "时间：" + new Date(event.timeStamp)+ " 产生事件的节点：" + event.target.id + " 当前节点：" +event.currentTarget.id); } "body" > "box1" class= "box1" > "box2" class= "box2" > "span" >This is a span. b. Terminate event bubbling

We now want to implement such a function. When div1 is clicked, "Hello, "I am the outermost div.", when you click on div2, "Hello, I am the second layer div" pops up; when you click on span, "Hello, I am span" pops up.

From this we will have the following javascript fragment:

? ## 1 2 3 4 5 6 7 8 9 10 11 12 13 "text/javascript" > window.onload = function () { document.getElementById( "box1" ).addEventListener( "click" , function (event){ alert( "Hello, I am the outermost div." ); ##}); document.getElementById( "box2" ).addEventListener( "click" , function (event){ alert( "Hello, I am the second layer div." ); }); document.getElementById( "span" ).addEventListener( "click" , function (event){ alert( "Hello , I am span. " ); ##}); ##} ## It is expected that when the above code clicks span, a pop-up box "Hello, I am span." Yes, such a dialog box does pop up:

However, this dialog box will not only produce this dialog box. After clicking OK, the following dialog box will pop up in turn:

##This is obviously not what we want! What we want is that whoever clicks will display whose information. Why does the above situation occur? The reason lies in the bubbling of events. When you click span, span will bubble up the generated event. div2 as the parent node and div1 as the grandparent node will also receive this event, so they will respond to the event and execute the response. function. Now the problem has been discovered, but how to solve it?

Method 1: Let’s consider a more vivid situation: a bubble in the water is rising from the bottom, and you are in the water now and don’t want the bubble to rise upward. What should you do? --Prick it! Without the bubbles, they will naturally not bubble up. Similarly, for a certain node, if we don’t want the event it is currently processing to continue to bubble up, we can terminate the bubbling:

In the corresponding processing function, add event.stopPropagation() , Terminate the broadcast distribution of events, so that the event stays at this node and will not be spread out. Modify the above script fragment:

? ##1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 "text/javascript" > window.onload = function () { document.getElementById( "box1" ).addEventListener( "click" , function (event){ alert( "Hello, I am the outermost div." ); event.stopPropagation(); ##}); document.getElementById( "box2" ).addEventListener( "click" , function (event){ alert( "Hello, I am on the second floor div. " ); ##event.stopPropagation(); }); document.getElementById( "span" ).addEventListener( "click" , function (event){ alert( "Hello, I am span." ); event.stopPropagation(); ##}); } After such a piece of code, clicking on different elements will give different prompts, and multiple boxes will not pop up.

Method 2: The event contains a reference to the node that originally triggered the event and a reference to the node currently processing the event. If the node only processes events triggered by itself, events that are not generated by itself will not be processed. event.target refers to the DOM node that generated this event object, and event.currrentTarget refers to the current processing node. We can check whether the two targets are equal.

can generate an event event object, the event.target points to the span element, when span handles this event, the event.currentTarget also points to the span element, if it is judged that the two are equal, the corresponding execution will be executed processing function. When the event is passed to div2, event.currentTarget becomes div2. At this time, it is judged that the two are not equal, that is, the event is not generated by div2 itself, and no response processing logic is performed.

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 "text/javascript" > window .onload = function () { document.getElementById( "box1" ).addEventListener( "click" , function (event){ if (event.target == event.currentTarget) { alert( "Hello, I am the outermost div." ); } }); document.getElementById( "box2" ).addEventListener( "click" , function (event){ if (event.target == event.currentTarget) { alert( "Hello, I am the second layer div." ); } }); document.getElementById( "span" ).addEventListener( "click" , function (event){ if (event.target == event.currentTarget) { alert( "您好，我是span。" ); } }); } Comparison:

From the perspective of event delivery: Method one is to cancel event bubbling, that is, when some nodes cancel bubbling, the event will no longer be delivered; The second method is to not prevent bubbling, filter the events that need to be processed, and continue to deliver the events after processing; Information, method one requires that the child elements of each element must also terminate the bubbling delivery of events, that is, they are functionally strongly related to other elements. This method will be very fragile. For example, if the processing function of the span element does not perform bubble termination, the event will be transmitted to div2, which will cause a prompt message for div2;

Disadvantages of method two: method two adds events for each element The listening processing functions and event processing logic are very similar, that is, they all have the judgment if (event.target == event.currentTarget). This creates a lot of code redundancy. Now it is okay to have three elements, but when there are more than 10 One, what to do with hundreds of them?

There is also a processing function for each element, which increases the complexity of logic and code to a certain extent.

Let’s analyze method two again: The principle of method two is that after the element receives the event, it determines whether the event meets the requirements, and then handles it accordingly, and then the event continues to bubble up and be passed upward; Since the event It is passed by bubbling, so can a certain parent node handle the event uniformly, determine the place where the event occurred (that is, the node where the event occurred), and then handle it accordingly? The answer is yes, by adding an event listener to the body element, and then judging event.target to produce different behaviors for different targets.

Refactor the code of method two:

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ## "text/javascript" > window.onload = function () { document.getElementById( "body" ).addEventListener( "click" ,eventPerformed); } ##function eventPerformed(event) { var target = event.target; switch (target.id) { case "span" : alert( "Hello, I am span." ); break ; case "div1" : alert( "Hello, I am the second layer of div." ); break ; case "div2" : ##alert( "Hello, I am the outermost div." ); break ; } } The result will be a click For different elements, only corresponding prompts will pop up, and there will be no redundant prompts. Through the above method, we have handed over the processing functions that each element should have to its grandparent node body element to complete. In other words, span, div2, and div1 will have their own response logic. Delegate it to the body and let it complete the corresponding logic without implementing the corresponding logic yourself. This mode is the so-called event delegation.

The following is a schematic diagram:

JavaScript event bubbling is me·Picture and text examples

Related articles