Home > Developer > JavaScript
The Js bubble mechanism means that if an element defines event A, such as A click event, if the event is triggered and does not prevent the event, the event will be propagated to the parent element, triggers the click function of the parent class.
For example:
Copy codeThe Code is as follows:
<Html>
<Script type = "text/javascript" src = "jquery-1.7.1.js"> </script>
<Script>
Function ialertdouble (e ){
Alert ('innerdouble ');
StopBubble (e );
}
Function ialertthree (e ){
Alert ('nerthree ');
StopBubbleDouble (e );
}
Function stopBubble (e ){
Var evt = e | window. event;
Evt. stopPropagation? Evt. stopPropagation () :( evt. cancelBubble = true); // prevents bubbles
}
Function stopBubbleDouble (e ){
Var evt = e | window. event;
Evt. stopPropagation? Evt. stopPropagation () :( evt. cancelBubble = true); // prevents bubbles
Evt. preventDefault (); // block the default browser behavior so that the link will not jump
}
$ (Function (){
// Method 1
// $ ('# Jquerytest'). click (function (event ){
// Alert ('innerfour ');
// Event. stopPropagation ();
// Event. preventDefault ();
//});
// Method 2
$ ('# Jquerytest'). click (function (){
Alert ('nerfour ');
Return false;
});
});
</Script>
<Div onclick = "alert ('without');">
<Div onclick = "alert ('middle');"> middle
<Div onclick = "alert ('inner ');"> inner </div>
<Div onclick = "ialertdouble (event)"> innerdouble </div>
<P> <a href = 'HTTP: // www.baidu.com 'onclick = "ialertthree (event)"> innerthree </a> </p>
<P id = 'jquerytest'> <a href = 'HTTP: // www.baidu.com '> innerfour </a> </p>
</Div>
</Div>
</Html>
When you click inner, 'inner ', 'middle', and 'without' are displayed in sequence '. This is event bubbling.
Intuitively, this is also true, because the innermost layer of the region is in the parent node. clicking the region of the child node is actually the region of the parent node, therefore, events will spread.
In fact, in many cases, we do not want to bubble events, because this will trigger several events at the same time.
Next, click innerdouble. It will be found that she does not bubble, because she calls the stopBubble () method in the method ialertdouble () called. The method determines the browser type (Ie uses cancleBubble () firefox uses stopProgation () to prevent bubbles.
However, if it is a link, we will find that she will also stop the bubble, but will jump, which is the default behavior of the browser. You need to use the preventDefault () method to block it. For details, see ialertthree ().
Currently, most users use jquery to bind click events, which is much simpler.
We can input the parameter event when clicking the event, and then directly
Event. stopPropagation ();
Event. preventDefault (); // This is not required if there is no link.
In this way, you can.
The framework is good. In fact, it is simpler to return false in the event handler. This is a shorthand method for calling stopPropagation () and preventDefault () on the event object at the same time.
[For detailed code, see the above. Remember to load jquery. js .]
In fact, you can also add judgment in each click event:
Copy codeThe Code is as follows:
$ ('# Id'). click (function (event ){
If(event.tar get = this ){
// Do something
}
})
Parsing: The variable event in the event handler stores the event object. The event.tar get attribute stores the target element of the event. This attribute is specified in the dom api but is not implemented by all browsers. JQuery makes necessary extensions to this event object so that this attribute can be used in any browser. Through .tar get, you can determine the elements in the DOM that receive the event first (that is, the actually clicked element ). Moreover, we know that this references the DOM elements used to process events, so we can write the above Code.
However, return false is recommended. If Jquery binds events.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
