JS Bubbling Event

One, what is event bubbling
Fires a class of events on an object (such as clicking the OnClick event), and if this object defines a handler for this event, then this event invokes the handler, and if the event handler is not defined or the event returns true, the event propagates to the object's parent object, from inside to outside, Until it is processed (all the same events of the parent object will be activated), or it reaches the topmost level of the object, the Document object (some browsers are windows).

For example, you have to appeal a case in the district Court, if there is no court to deal with such cases, the local authorities will help you to continue to appeal to a higher court, such as from the city to the provincial level, until the central court, and ultimately your case to be dealt with.

Ii. What is the role of event bubbling
(1) Event bubbling allows multiple operations to be centralized (adding an event handler to a parent element to avoid adding event handlers to multiple child elements), which also allows you to capture events at different levels of the object layer.

"Centralized Processing example"

Copy CodeThe code is as follows:
<div onclick= "Eventhandle (event)" id= "OutSide" style= "width:100px"; height:100px; Background: #000; padding:50px ">
<div id= "InSide" style= "width:100px; height:100px; Background: #CCC "></div>
</div>
<script type= "Text/javascript" >
This example only defines the processing method in the outer box, and this method captures the child element click behavior and processes it. Suppose there are thousands of child elements to deal with, should we add "onclick=" Eventhandle (event) "" to each element? Obviously there is no such a centralized approach to simplicity, while its performance is also higher.
function Eventhandle (e)
{
var e=e| | window.event;
var obj=e.target| | E.srcelement;
Alert (obj.id+ ' was click ')
}
</script>

(2) Let different objects capture the same event at the same time, and call their own proprietary handlers to do their own things, like the Boss command, their employees to do their jobs on the job.

"Simultaneous capture of the same event example"

Copy CodeThe code is as follows:
<div onclick= "Outsidework ()" id= "OutSide" style= "width:100px; height:100px; Background: #000; padding:50px ">
<div onclick= "Insidework ()" id= "InSide" style= "width:100px; height:100px; Background: #CCC "></div>
</div>
<script type= "Text/javascript" >
function Outsidework ()
{
Alert (' My name is outside,i be working ... ');
}

function Insidework ()
{
Alert (' My name is inside,i be working ... ');
}

Because the following program automatically activates click events, some browsers do not allow, so please click on the gray box, from here to start the command, so because of the bubble, the big black box will also receive the Click event, and call their own handlers. If there are more boxes nested, the same reason.

/*
function Bossorder ()
{
Document.getelmentbyid (' InSide '). Click ();
}
Bossorder ();
*/
</script>

Iii. what to pay attention to
There are three ways to capture events, and event bubbling is just one of them: (1) The bubbling event of IE from inside to outside (Inside→outside). (2) Capture-type event Netscape4.0 from outside to Inside (outside→inside). (3) Dom event flow, from outside to inside, then from inside to outside back to the origin (Outside→inside→outside) of the event capture method (it seems that the object will trigger two event processing, what is the role?) I don't understand! ）。

Not all events can bubble. The following events do not bubble: blur, focus, load, unload.

Event capture is different in different browsers and even versions of browsers of the same type. If the Netscape4.0 uses a capture event solution, most other browsers support the bubbling event solution, and the DOM event stream also supports text node event bubbling.

Event captures reach the top level of the target in different browsers or different browser versions also have a difference. In IE6, HTML is a receive event bubbling, and most browsers continue bubbling to the Window object, which is ... body→documen→window.

Blocking bubbles does not prevent the object from default behavior. For example, when the Submit button is clicked, the form data will be submitted, which does not require us to write the program custom.

Iv. Blocking Event bubbling
Usually we are one step, clear our own event trigger source, do not want the browser smart, aimlessly to help us find the appropriate event handlers, that is, we clear the most accurate target, in this case we do not need event bubbling. In addition, through the understanding of event bubbling, we know that the program will do a lot of extra things, which inevitably increases the program overhead. Another important issue is that event bubbling can activate events that we don't want to activate, cause program confusion, or even start debugging, which often becomes a tricky problem for programmers who are not familiar with event bubbling. So when necessary, we want to stop the event bubbling.

"Do not want to activate the event is activated example"

Copy CodeThe code is as follows:
<div onclick= "Openwin (' http://www.baidu.com ')" id= "OutSide" style= "width:100px; height:100px; Background: #000; padding:50px ">
<div onclick= "Openwin (' http://www.google.com ')" id= "InSide" style= "width:100px; height:100px; Background: #CCC "></div>
</div>

<script type= "Text/javascript" >
In this case you actually want to click on the gray box to open the Google home page, and click on the black box to open the Baidu home page, but the result you click on the gray box, but the same time opened two pages. In fact, in the actual design less encounter this problem, you may think if I put different buttons or links in the depth of the page different DOM, the deep event trigger will not affect the top level of the button? No, because a button cannot form a nested relationship.
function Openwin (URL)
{
window.open (URL);
}
</script>

Here is my online copy of a method, put this method at the end of the precise target object handler, after this event triggered processing ends, the event will not be bubbling processing.

"Block Event bubbling Example"

Copy CodeThe code is as follows:

<div onclick= "ShowMsg (this,event)" id= "OutSide" style= "width:100px; height:100px; Background: #000; padding:50px ">
<div onclick= "ShowMsg (this,event)" id= "InSide" style= "width:100px; height:100px; Background: #CCC "></div>
</div>
<script type= "Text/javascript" >
When you stop the event bubbling, you click on the gray box, and the whole process only bounces once the dialog box (note vs. default)
function ShowMsg (obj,e)
{
alert (obj.id);
Stopbubble (e)
}

Block event bubbling function
function Stopbubble (e)
{
if (e && e.stoppropagation)
E.stoppropagation ()
Else
Window.event.cancelbubble=true
}
</script>