1. What is event bubble
A certain type of event is triggered on an object (such as clicking onclick event). If this object defines the handler for this event, the event will call the handler. If this event handler is not defined or the event returns true, the event will propagate to the parent object of the object, from the inside out, until it is processed (all similar events of the parent object will be activated), or it will reach the top level of the object level, that is, the document object (some browsers are windows).
For example: If you want to appeal a case in the local court, if there is no court handling such a case, the relevant local departments will help you continue to appeal to the higher court, such as from the municipal level to the provincial level, to the central court, and finally to the central court, and finally your case can be handled.
2. What is the effect of bubbling events?
(1) Event bubble allows multiple operations to be processed centrally (adding the event processor to a parent element to avoid adding the event processor to multiple child elements), it also allows you to capture events at different levels in the object layer.
【Centralized processing example】
<div onclick="eventHandle(event)" style="width:100px; height:100px; background:#000; padding:50px">
<div style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//This example only defines the processing method outside the box, and this method can also capture the child element click behavior and process it. Assuming there are thousands of child elements to be processed, should we add "onclick="eventHandle(event)" to each element? Obviously, there is no such centralized processing method to be simple, and its performance is also higher.
function eventHandle(e)
{
var e=e||;
var obj=||;
alert(+' was click')
}
</script>
(2) Let different objects capture the same event at the same time and call their own exclusive handler to do their own things. Just like the boss’s order, each employee will do his job in his position.
【Capture the same event example at the same time】
<div onclick="outSideWork()" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="inSideWork()" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
function outSideWork()
{
alert('My name is outSide,I was working...');
}
function inSideWork()
{
alert('My name is inSide,I was working...');
}
//Because the following program automatically activates the click event, some browsers do not allow it, so please click the gray box and start to place the command from here. In this way, due to the bubble reason, the black box will also receive the click event and call its own handler. If there are more boxes nesting, the same goes for it.
/*
function bossOrder()
{
('inSide').click();
}
bossOrder();
*/
</script>
3. What to pay attention to
●There are actually three ways to capture events, and event bubbles are just one of them: (1) IE bubbling events from the inside to the outside (inside→outside). (2) Captured events from outside to inside (outside → inside). (3) DOM event stream, the event capture method first from the outside to the inside, and then from the inside to the outside to the origin (outside→inside→outside) (it seems that the object will trigger two event processing, what is the effect? I don’t understand!).
●Not all events can bubbling. The following events do not bubble: blur, focus, load, unload.
●The event capture method is different in different browsers, or even different versions of the same browser. For example, Netscape 4.0 adopts a capture event solution, while most other browsers support bubble event solutions. In addition, the DOM event stream also supports text node event bubbles.
●The targets that reach the top level of event capture are also different in different browsers or browser versions. In IE6, HTML is a bubble of receiving events, and most browsers continue bubbles to window objects, that is...body→documen→window.
●Stop bubbling does not prevent object default behavior. For example, the form data will be submitted after the submit button is clicked. This behavior does not require us to write a program to customize it.
4. Stop the bubbling of events
Usually, we are in one step and clarify our event triggering source. We do not want the browser to be smart and aimlessly help us find the right event handler, that is, we clarify the most accurate target. In this case, we do not need the event to bubbling. In addition, through the understanding of the bubbling of events, we know that the program will do more extra things, which will inevitably increase program overhead. Another important problem is: event bubble processing may activate events that we did not want to activate, resulting in program confusion and even inability to debug, which often becomes a difficult problem for programmers who are not familiar with event bubbles. So when necessary, we must stop the events from bubbled up.
【Example of event that does not want to be activated】
<div onclick="openWin('')" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="openWin('')" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//In this example, you actually want to click on the gray box to open the Google homepage, and click on the black box to open the baidu homepage, but when you click on the gray box, you open two web pages at the same time. In fact, I rarely encounter this problem in actual design. You may wonder if I place different buttons or links deep in different DOMs on the page, will the event triggering in the deep layer affect the top button? No, because the button cannot form a nested relationship.
function openWin(url)
{
(url);
}
</script>
The following is a method I copied online, put this method at the end of the precise target object processing program. After the trigger processing of this event is completed, the event will not be bubbled.
【Example of stopping events from bubbled】
<div onclick="showMsg(this,event)" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="showMsg(this,event)" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//After preventing the event from bubbled, you click on the gray box, and the dialog box will only pop up once during the whole process (note that compared with the default)
function showMsg(obj,e)
{
alert();
stopBubble(e)
}
//Stop event bubble function
function stopBubble(e)
{
if (e && )
()
else
=true
}
</script>
A certain type of event is triggered on an object (such as clicking onclick event). If this object defines the handler for this event, the event will call the handler. If this event handler is not defined or the event returns true, the event will propagate to the parent object of the object, from the inside out, until it is processed (all similar events of the parent object will be activated), or it will reach the top level of the object level, that is, the document object (some browsers are windows).
For example: If you want to appeal a case in the local court, if there is no court handling such a case, the relevant local departments will help you continue to appeal to the higher court, such as from the municipal level to the provincial level, to the central court, and finally to the central court, and finally your case can be handled.
2. What is the effect of bubbling events?
(1) Event bubble allows multiple operations to be processed centrally (adding the event processor to a parent element to avoid adding the event processor to multiple child elements), it also allows you to capture events at different levels in the object layer.
【Centralized processing example】
Copy the codeThe code is as follows:
<div onclick="eventHandle(event)" style="width:100px; height:100px; background:#000; padding:50px">
<div style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//This example only defines the processing method outside the box, and this method can also capture the child element click behavior and process it. Assuming there are thousands of child elements to be processed, should we add "onclick="eventHandle(event)" to each element? Obviously, there is no such centralized processing method to be simple, and its performance is also higher.
function eventHandle(e)
{
var e=e||;
var obj=||;
alert(+' was click')
}
</script>
(2) Let different objects capture the same event at the same time and call their own exclusive handler to do their own things. Just like the boss’s order, each employee will do his job in his position.
【Capture the same event example at the same time】
Copy the codeThe code is as follows:
<div onclick="outSideWork()" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="inSideWork()" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
function outSideWork()
{
alert('My name is outSide,I was working...');
}
function inSideWork()
{
alert('My name is inSide,I was working...');
}
//Because the following program automatically activates the click event, some browsers do not allow it, so please click the gray box and start to place the command from here. In this way, due to the bubble reason, the black box will also receive the click event and call its own handler. If there are more boxes nesting, the same goes for it.
/*
function bossOrder()
{
('inSide').click();
}
bossOrder();
*/
</script>
3. What to pay attention to
●There are actually three ways to capture events, and event bubbles are just one of them: (1) IE bubbling events from the inside to the outside (inside→outside). (2) Captured events from outside to inside (outside → inside). (3) DOM event stream, the event capture method first from the outside to the inside, and then from the inside to the outside to the origin (outside→inside→outside) (it seems that the object will trigger two event processing, what is the effect? I don’t understand!).
●Not all events can bubbling. The following events do not bubble: blur, focus, load, unload.
●The event capture method is different in different browsers, or even different versions of the same browser. For example, Netscape 4.0 adopts a capture event solution, while most other browsers support bubble event solutions. In addition, the DOM event stream also supports text node event bubbles.
●The targets that reach the top level of event capture are also different in different browsers or browser versions. In IE6, HTML is a bubble of receiving events, and most browsers continue bubbles to window objects, that is...body→documen→window.
●Stop bubbling does not prevent object default behavior. For example, the form data will be submitted after the submit button is clicked. This behavior does not require us to write a program to customize it.
4. Stop the bubbling of events
Usually, we are in one step and clarify our event triggering source. We do not want the browser to be smart and aimlessly help us find the right event handler, that is, we clarify the most accurate target. In this case, we do not need the event to bubbling. In addition, through the understanding of the bubbling of events, we know that the program will do more extra things, which will inevitably increase program overhead. Another important problem is: event bubble processing may activate events that we did not want to activate, resulting in program confusion and even inability to debug, which often becomes a difficult problem for programmers who are not familiar with event bubbles. So when necessary, we must stop the events from bubbled up.
【Example of event that does not want to be activated】
Copy the codeThe code is as follows:
<div onclick="openWin('')" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="openWin('')" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//In this example, you actually want to click on the gray box to open the Google homepage, and click on the black box to open the baidu homepage, but when you click on the gray box, you open two web pages at the same time. In fact, I rarely encounter this problem in actual design. You may wonder if I place different buttons or links deep in different DOMs on the page, will the event triggering in the deep layer affect the top button? No, because the button cannot form a nested relationship.
function openWin(url)
{
(url);
}
</script>
The following is a method I copied online, put this method at the end of the precise target object processing program. After the trigger processing of this event is completed, the event will not be bubbled.
【Example of stopping events from bubbled】
Copy the codeThe code is as follows:
<div onclick="showMsg(this,event)" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="showMsg(this,event)" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//After preventing the event from bubbled, you click on the gray box, and the dialog box will only pop up once during the whole process (note that compared with the default)
function showMsg(obj,e)
{
alert();
stopBubble(e)
}
//Stop event bubble function
function stopBubble(e)
{
if (e && )
()
else
=true
}
</script>