One, what is event bubbling
Triggers a class of events (such as clicking the OnClick event) on an object. If this object defines a handler for this event, this event invokes the handler, and if no such event handler is defined or the event returns true, the event propagates to the object's parent object, from the inside to the outside, Until it is processed (all similar events of the parent object will be activated), or it reaches the topmost level of the object hierarchy, which is the document object (some browsers are windows).
For example, you have to appeal a case in the district Court, and if the place does not have a court to deal with such cases, the local authorities will help you to continue to appeal to the higher court, such as from the city to the provincial level, until the central court, and ultimately to the case to be dealt with.
Ii. What is the effect of event bubbling?
(1) Event bubbling allows multiple operations to be handled centrally (adding an event handler to a parent element to avoid adding an event handler to multiple child elements), and it allows you to capture events at different levels of the object layer.
"Centralized Processing example"
Copy Code code 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 can capture the child element click Behavior and handle it. Suppose there are tens of 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 the simple, at the same time 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 handler to do their own thing, just like the boss orders, their employees to do their job.
"Capturing the same event example at the same time"
Copy Code code 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's outside,i was working ... ');
}
function Insidework ()
{
Alert (' My name's inside,i was working ... ');
}
Because the following program activates the Click event automatically, some browsers do not allow it, so click the gray box and start the command here so that the black box will receive the Click event and call its handler for bubbling reasons. If there are more boxes nested, the same reason.
/*
function Bossorder ()
{
Document.getelmentbyid (' InSide '). Click ();
}
Bossorder ();
*/
</script>
Three, what needs to be noted
Event capture is in fact three ways, event bubbling is just one of them: (1) IE bubbling events from inside to outside (Inside→outside). (2) Netscape4.0 events from outside to Inside (outside→inside). (3) DOM event flow, first from the outside to the inside, and then back to the origin (Outside→inside→outside) event capture Method (it seems that the object will trigger two event processing, what's the effect?) 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 the same browser. If the Netscape4.0 adopts a capture event solution, most other browsers support the bubbling event solution, and the DOM event stream also supports text node event bubbling.
The goal of event capture reaching the top level is also different in browsers or different browser versions. In IE6, HTML is a sink event bubbling, and most browsers will bubble continuation to the Window object, i.e. ... Body→documen→window.
Blocking bubbles does not prevent object default behavior. For example, the Submit button is clicked to submit the form data, which does not require us to write the program customization.
Iv. Preventing event bubbling
Usually we are one-step, clear our event trigger source, do not want the browser smart, aimlessly to help us find the appropriate event handler, that is, we identify the most accurate target, in which case we do not need event bubbling. In addition, by understanding the event bubbling, we know that the program will do more than the extra things, which inevitably increases the program overhead. Another important issue is that event bubbling can activate events that we didn't want to activate, causing the program to get out of process or even debug, which is often a tricky problem for the unfamiliar programmer with the event bubbling. So when necessary, we want to stop the event bubbling.
"Don't want to activate an event activated by an example"
Copy Code code 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 homepage, and click on the black box to open the Baidu home page, but the result you click on the gray box, it is also open two pages. In fact, less experienced in the actual design of this problem, you might think if I placed different in the depth of the DOM of the page different buttons or links, the depth of the event trigger will affect the top button? No, because buttons cannot form nested relationships.
function Openwin (URL)
{
window.open (URL);
}
</script>
The following is my online copy of a method, put this method at the end of the precision target object handler, this event triggers the processing end, the event will not be bubbling processing.
"Block Event bubbling Example"
Copy Code code 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" >
Block event bubbling, you click on the gray box, the whole process only play once a dialog box (note with the default contrast)
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>
