Introduction and application of JavaScript event bubbling_javascript skills

(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]

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]