Home > Developer > JavaScript
What is bubble?
There can be multiple events on the page, or multiple elements can respond to the same event. Assume that there are two elements on the webpage, one of which is nested in the other, and both are bound to the click event, and the click event is also bound to the body element.
01
<Div id = "content">
02
Outer div Element
03
<Span> Inner span element </span>
04
Outer div Element
05
</Div>
06
07
<Script type = "text/javascript">
08
$ (Function (){
09
// Bind a click event to the span Element
10
$ ('Span '). bind ("click", function (){
11
Var txt = ('{msg'{.html () + "<p> the inner span element is clicked. <p/> ";
12
('{Msg'}.html (txt );
13
});
14
// Bind a click event to the div Element
15
$ ('# Content'). bind ("click", function (){
16
Var txt = ('{msg'{.html () + "<p> the outer div element is clicked. <p/> ";
17
('{Msg'}.html (txt );
18
});
19
// Bind a click event to the body Element
20
$ ("Body"). bind ("click", function (){
21
Var txt = ('{msg'{.html () + "<p> The body element is clicked. <p/> ";
22
('{Msg'}.html (txt );
23
});
24
})
25
</Script>
When you click an internal span element to trigger the click Event of the span element, three records are output. Only clicking the internal span element triggers the click Event bound to the external div element and the body element. This is caused by event bubbling. When you click the span element, you also click the element div that contains the span element and the element body that contains the div element. Each element responds to the click event in a specific order.
The click events of an element are "bubbling" in the following order ".
<Span>
<Div>
<Body>
The reason for this is bubble, because the event will follow the DOM hierarchy as the bubble continues up to the top.
Problems caused by event bubbles
Event bubbling may cause unexpected results. In the preceding example, only the click Event of the <span> element is triggered. However, the click events of the <div> element and <body> element are also triggered. Therefore, it is necessary to limit the scope of the event. When you click the <span> element, only the click Event of the <span> element is triggered, and the click Event of the <div> element and <body> element is not triggered: when you click a <div> element, only the click Event of the <div> element is triggered, but the click Event of the <body> element is not triggered.
Event object
Since IE-DOM and standard DOM implement different methods of event objects, it is difficult to get event objects in different browsers. To address this problem, JQuery makes necessary extensions and encapsulation, so that it can easily obtain the event object and some attributes of the event object in any browser.
It is very simple to use the event object in a program. You only need to add a parameter to the function. The jQuery code is as follows:
1
$ ("Element"). bind ("click", function (event ){
2
// Event: event object
3
//...
4
});
In this way, when you click the "element" element, the event object is created. This event object can be accessed only by the event processing function. After the event processing function is executed, the event object is destroyed.
Stop event bubbling
Stopping event bubbling can prevent the event processing functions of other objects from being executed. The stopPropagation () method is provided in JQuery to stop event bubbling.
1
$ (Function (){
2
// Bind a click event to the span Element
3
$ ('Span '). bind ("click", function (event ){
4
Var txt = ('{msg'{.html () + "the inner span element is clicked ";
5
('{Msg'}.html (txt );
6
Event. stopPropagation (); // prevents event bubbles
7
});
8
})
When you click the <span> element, only the click event on the <span> element is triggered, and the click Event of the <div> element and <body> element is not triggered. You can solve the bubble problem on the <div> element in the same way.
1
$ ('# Content'). bind ("click", function (event ){
2
Var txt = ('{msg'{.html () + "<p> the outer div element is clicked. <p/> ";
3
('{Msg'}.html (txt );
4
Event. stopPropagation (); // prevents event bubbles
5
});
In this way, when you click the <span> element or <div> element, only the corresponding content is output, and no other content is output.
Block default behavior
Elements in a Web page have their own default behaviors. For example, after a hyperlink is clicked, the page jumps and the "Submit" button is clicked, and the form is submitted. Sometimes, the default behavior of elements needs to be blocked.
In JQuery, The preventDefault () method is provided to prevent the default behavior of elements.
For example, in a project, you often need to verify the form. When you click the submit button, verify the form content, such as whether an element is a required field, whether the length of an element is 6 characters long. When the form does not meet the submission conditions, it must be blocked (default Act ).
01
<Form action = "test.html">
02
Username: <input type = "text" id = "username"/>
03
<Br/>
04
<Input type = "submit" value = "submit" id = "sub"/>
05
</Form>
06
07
$ (Function (){
08
$ ("# Sub"). bind ("click", function (event ){
09
Var username = $ ("# username"). val (); // get the element value
10
If (username = "") {// determines whether the value is null.
11
$ ("# Msg" cmd.html ("<p> the value of the text box cannot be blank. </p>"); // prompt information
12
Event. preventDefault (); // block default behavior (Form submission)
13
}
14
})
15
})
If the user name is blank, click Submit. A prompt is displayed, and the form cannot be submitted. The form can be submitted only after the content is entered in the user name. It can be seen that the preventDefault () method can prevent form submission.
If you want to stop bubbling and default behavior on the event object at the same time, you can return the same value as false in the event processing function. This is a shorthand Method for calling both the stopPrapagation () method and the preventDefault () method on the event object.
In the form example, you can rewrite event. preventDefault (); to return false;
You can also rewrite event. stopPropaqation (); In the event bubble example to: return false;
Event capture
Event capture and event bubbling are two opposite processes. Event capture is triggered from the top down. In this example, the click event of an element is captured in the following order.
<Body>
<Div>
<Span>
Obviously, event capture starts from the outermost element and then to the innermost element. Therefore, the bound click event is first passed to the <body> element, then to the <div> element, and finally to the <span> element.
Unfortunately, not all mainstream browsers support event capture and this vulnerability cannot be fixed using JavaScript. JQuery does not support event capture. If you need to use event capture, use native JavaScript directly.
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
