The example of this article analyzes the DOM event bubbling in jquery. Share to everyone for your reference. The specific analysis is as follows:
What is bubbling
You can have multiple events on a page, or multiple elements to respond to the same event. Suppose there are two elements on the Web page, one of which is nested within another element and is bound to the Click event, and the Click event is also bound on the BODY element.
<div id= "content" > outer div elements <span> inner span element </span> outer div element </div>
<script type= "Text/javascript" >
$ (function () {
/) Bind Click event
$ (' span ') for a SPAN element. Bind ("click", function () {
var txt = $ (' #msg '). HTML () + "<p> inner span element is clicked .<p/>";
$ (' #msg '). html (TXT);
});
Binds the Click event
$ (' #content ') for the DIV element. bind ("click", Function () {
var txt = $ (' #msg '). HTML () + <p> The outer div element is clicked .<p/> ";
$ (' #msg '). html (TXT);
});
Bind Click event $ ("body") for the BODY element
. Bind ("click", Function () {
var txt = $ (' #msg '). HTML () + "<p>body element is clicked. <p/> ";
$ (' #msg '). html (TXT);
});
</script>
When you click an internal span element, that is, the Click event that triggers a SPAN element, 3 records are output. Clicking an internal span element only triggers the Click event that is bound by the external DIV element and the BODY element. This is caused by event bubbling. When you click a SPAN element, you also click the element div that contains the span element and the body of the element that contains the div element, and each element responds to the Click event in a specific order.
The Click event for the element is "bubbling" in the following order.
1. <span>
2. <div>
3. <body>
It is called bubbling because events are kept up to the top by the DOM hierarchy like blisters.
Issues caused by event bubbling
Event bubbling may result in unexpected effects. In the example above, the click event for the <span> element was intended to be triggered, while the click event of the <div> element and the <body> element was also triggered. Therefore, it is necessary to limit the scope of the event. When you click the <span> element, only the <span> element's Click event is triggered, without triggering the Click event of the <div> and <body> elements: When you click the <div> element, only the The Click event of the <div> element without triggering the Click event of the <body> element.
Event Object
Because Ie-dom and the standard DOM implement event objects differently, it becomes more difficult to get event objects in different browsers. For this problem, jquery makes the necessary extensions and encapsulation, making it easy to get some properties of event objects and event objects in any browser.
Using event objects in your programs is simple, just add a parameter to the function, and the jquery code is as follows:
$ ("element"). Bind ("click", Function (event) {
//event: Event object
//...
});
This way, the event object is created when you click the element elements. This event object can only be accessed by the event handler function. When the event handler function finishes executing, the event object is destroyed.
Stop event bubbling
Stop event bubbling can prevent the event handler functions of other objects in the event from being executed. The Stoppropagation () method is provided in jquery to stop event bubbling.
$ (function () {
//is bound Click event
$ (' span ') for a SPAN element. Bind ("click", Function (event) {
var txt = $ (' #msg '). HTML () + " The inner span element is clicked ";
$ (' #msg '). html (TXT);
Event.stoppropagation (); Block event bubbling
});
When you click the <span> element, only the Click event on the <span> element is triggered without triggering the Click event of the <div> element and <body> element. You can solve the bubbling problem on <div> elements in the same way.
$ (' #content '). Bind ("click", Function (event) {
var txt = $ (' #msg '). HTML () + "<p> outer div element is clicked .<p/>";
$ (' #msg '). html (TXT);
Event.stoppropagation (); Block event bubbling
});
This way, when you click the <span> element or the <div> element, the corresponding content is only output, not the other content.
Block default behavior
Elements in a Web page have their own default behavior, for example, when you click the hyperlink and then jump, click the Submit button to submit the form, and sometimes you need to block the default behavior of the element.
In jquery, the Preventdefault () method is provided to block the default behavior of the element.
To cite an example, in a project, you often need to validate the form, and when you click the Submit button, verify the contents of the form, such as whether an element is a required field, whether an element is 6 bits long, and so on, to block the form's submission (the default behavior) when the form does not meet the submit criteria.
<form action= "test.html" > username: <input type= "text" id= "username"/> <br/> <input Type= "Submit" value= "submitted" id= "sub"/> </form>
$ (function () {
$ (' #sub '). Bind ("click", Function (event) {
var username = $ ("#username"). Val ();//Get the value
of the element if (username== "") {//Determines whether the value is empty
$ ("#msg"). HTML ("<p> text box value cannot be empty .</p>");//hint Info
Event.preventdefault (); Block default behavior (form submission)}
}
)
When the user name is empty, the Submit button appears, and the form cannot be submitted. You can submit a form only after you have entered it in the user name. Visible, the Preventdefault () method can block the form's commit behavior.
If you want to stop bubbling and default behavior on the event object at the same time, you can return false in the event handler function. This is a shorthand for calling both the Stopprapagation () method and the Preventdefault () method on the event object.
In the form example, you can put Event.preventdefault (); Rewrite as: return false;
Event.stoppropaqation () can also be used in the event bubbling example; Rewrite as: return false;
Event capture
Event capture and event bubbling are just the opposite of two processes, and event captures are triggered from the top down. is also an example of a bubbling event where the click event of the element is captured in the following order.
1. <body>
2. <div>
3. <span>
Obviously, event capture starts with the outermost element and then to the innermost element. Therefore, the bound click event is first passed to the <body> element, which is then passed to the <div> element and finally passed to the <span> element.
Unfortunately, not all major browsers support event capture, and this flaw is not fixed by JavaScript. jquery does not hold event captures, and if readers need to use event capture, use native JavaScript directly.
I hope this article will help you with your jquery programming.
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
