Introduction and application of JavaScript event bubbling_javascript skills

1. What is event bubbling?
Trigger a certain type of event on an object (such as a click onclick event). If the object defines a handler for this event, then this event will call this Handler, if this event handler is not defined or the event returns true, then this event will be propagated to the parent object of this object, from inside to outside, until it is handled (all similar events of the parent object will be activated), Or it reaches the top level of the object hierarchy, which is the document object (window in some browsers).

For example: you want to appeal a case in the local court. If there is no local court to handle such cases, the relevant local departments will help you continue to appeal to the higher court, such as from the municipal level to the provincial level. , until you go to the Central Court to finally get your case processed.

2. What is the role of event bubbling?
(1) Event bubbling allows multiple operations to be processed centrally (add event handlers to a parent element to avoid Adding event handlers to multiple child elements) also allows you to capture events at different levels of the object layer.

[Centralized processing example]

Copy code The code is as follows:

< ;div onclick="eventHandle(event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">

(2) Let different objects capture the same event at the same time and call their own exclusive handlers to do their own things, like The boss gave an order and each employee went to do his or her job.

[Example of capturing the same event at the same time]

Copy code The code is as follows:

3. What you need to pay attention to
●There are actually three ways to capture events, and event bubbling is just one of them: (1) IE bubbling events from inside to outside (inside→outside). (2) Netscape4.0 capture events from outside to inside (outside→inside). (3) DOM event flow, first from the outside to the inside, and then from the inside to the outside back to the origin (outside→inside→outside) event capture method (it seems that the object will trigger event processing twice, what is the effect of this? I don’t understand ! ).

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

●Event capture methods are different in different browsers, or even different versions of the same browser. For example, Netscape 4.0 uses a capture event solution, and most other browsers support a bubbling event solution. In addition, the DOM event stream also supports text node event bubbling.

●The target of event capture to reach the top level is also different in different browsers or different browser versions. In IE6, HTML receives event bubbling, and most browsers continue bubbling to the window object, that is...body→documen→window.

●Preventing bubbling does not prevent the object's default behavior. For example, when the submit button is clicked, the form data will be submitted. This behavior does not require us to write a customized program.

4. Prevent events from bubbling up
Usually we do it all in one step, clarifying the source of our event triggers, and do not want the browser to be smart and aimlessly help us find appropriate event processing Program, that is, we know the most precise goal. In this case, we do not need event bubbling. In addition, through the understanding of event bubbling, we know that the program will do more extra things, which will inevitably increase the program overhead. Another important issue is that event bubbling processing may activate events that we do not want to activate, causing program confusion and even making it impossible to debug. This often becomes a thorny issue for programmers who are not familiar with event bubbling. So when necessary, we need to prevent events from bubbling up.

[Example of activation of events that do not want to be activated]

Copy code The code is as follows:

Open the Baidu homepage, but when you click on the gray box, two web pages are opened at the same time. In fact, this problem is rarely encountered in actual design. You may think that if I place different buttons or links in different DOM depths of the page, will the event triggering in the deep layers affect the top-level buttons? No, because buttons cannot form nested relationships.
function openWin(url)
{
window.open(url);
}



The following is what I copied from the Internet A method. Place this method at the end of the precise target object handler. After this event is triggered and processed, the event will no longer be bubbled.

[Example of preventing event bubbling]

Copy code

The code is as follows: