JavaScript event bubbling application example analysis_javascript skills

However, in some large-scale WEB interactive projects today, such as large-scale WebGame projects, the impact of JavaScript event bubbling is worthy of attention. This article uses a simple example to explain JavaScript event bubbling and usage precautions.

If you have no impression of JavaScript event bubbling, you might as well read a blog I wrote before, "Introduction and Application of JavaScript Event Bubbles". This article is practical and will not elaborate too much on the basic knowledge of JavaScript event bubbling.

Before starting the article, let’s take a look at the following requirement: The following HTML assumes that it describes the outer frame of a WebGame project package bar (people who have played online games should know what a package bar or an inventory bar is) , drag the package title bar to drag the package to any position on the page, and click the "×" close button on the right side of the title bar to close the display of the package bar. By observing the HTML structure, you can find that the close button is actually an A link, and it exists as a child element of the title bar H5. To drag an element, we would think of registering the mousedown event to the dragging handle element, and clicking or "clicking" the close button to close the package. Based on this requirement, we quickly got the following code.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>JavaScript event bubbling example 1</title> <style type="text/css"> #box {width:200px; height:100px; border:2px solid blue} #box h5 {margin:0; padding:2px 5px; font-size:18px; text-align:right; background:blue; cursor:move} #box h5 a {text-decoration:none; color:#FFF} </style> <div id="box"> <h5 id="a-onclick-closeBox-href-javascript-void-a"><a onclick="closeBox();" href="javascript:void(0);">×</a></h5> <div id="testInfo"></div> </div>
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]

In the above example, You find that when you click the close button, the mousedown event of the title bar is also triggered. Obviously this is what you expected, because you know that this is the JavaScript event bubbling at work. In fact, the effect you really want is not to execute the mousedown event registered in the title H5 when you click the close button, so you thought of preventing the event from bubbling up, and then modified the code to the following:

Copy code

The code is as follows:

×

As a result, you find that when you click the close button, the mousedown event registered by the title H5 is still executed. What is going on? In fact, if you are careful, you may find that the events registered by the H5 title and the A link are not the same. In the above code, we call the blocking event method in the click event registered by the A link. This just means that the "similar event registered by its parent element" Event" will not be executed, which means that if the H5 title also registers a click event, the click event will not be executed, and the mousedown here will continue to be executed. The mousedown execution here does not occur because you click on the title bar, but because the mousedown event is generated when you click. Then, due to the existence of the JavaScript event bubbling mechanism, the event is broadcast to the parent and is mousedowned by the H5 title. Register method capture. For understanding of this point, you can refer to my other blog "When onmousedown, onmouseup, and onclick are applied to the same label node Element at the same time". Now, through analysis, you should know how to do it. Make a small change to the above code. Just change the click event of the A link to the same mousedown event as the H5 title, and the effect you want will be achieved.
Related topics:
Now let’s talk about how to easily prevent event bubbling when developing with jQuery. As an excellent scripting framework, jQuery is naturally outstanding in event encapsulation and browser compatibility. If you want to know more, you can also read my other blog "Using jQuery's $.event.fix function to unify browser event processing".
There are two ways to prevent events from bubbling using jQuery:
1. Use jQuery to make compatible event objects and directly use event.preventDefault(). The example code is as follows:

Copy code The code is as follows:

×

> ;

2. Function bound in jQuery Return false in , that is, return false. Note: It is useless to return false from methods that are not bound using jQuery. The code is as follows:

Copy code The code is as follows:

×

One final note Now, use the second method to prevent the event from bubbling, and also prevent the browser's default behavior. In the handle method of the source code of jQuery event processing (jQuery JavaScript Library v1.3.2 non-compressed code line 2700) we can see For the following processing, event.preventDefault() is used to prevent the browser's default behavior.

Copy code The code is as follows:

handle: function(event)
{
//other code......
if (ret === false)
{
event.preventDefault();
event.stopPropagation();
}
//other code......
}

Author: WebFlash