1. What is bubbling
eg
3 records are output when you click the ' inner span element ', that is, when the click event of the <span> element is triggered
That
The inner span element is clicked
The outer div element is clicked
The BODY element is clicked
This is caused by event bubbling.
2. Event bubbling Problem
01. Event Objects
To use the event object in your program, just add a parameter to the function, and the jquery code is as follows:
$ (' element '). Bind (' click ', Function (event) {//event: Event object
});
02. Stop Event Bubbling
Stoppropagation () method is provided in jquery to stop event bubbling
Take the span element binding Click event as an example:
Bind Click event
$ (' span ') for SPAN element. Bind (' click ', Function (event) {//event: Event object
var txt = $ (' #msg '). html () + ' <p& gt; Inner span element is clicked </p> ';
$ (' #msg '). html (TXT);
Event.stoppropagation (); Stop event bubbling
});
When you click the ' inner span element ', that is, when you trigger the Click event of the <span> element, only 1 records are output
That
The inner span element is clicked
This solves the bubbling problem.
03. Block Default Behavior
Elements in a Web page have their own default behavior, for example, when you click a hyperlink and then jump, click the Submit form to submit, 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.
Eg: take the input submission as an example
If you do not enter content, you can block the default behavior (form submission)
Summary: If you want to stop bubbling and default behavior for events at the same time, you can return false in the event handler function. This is a shorthand for calling both the Stoppropagation () method and the Preventdefault () method on the event object.
In the example of the above form, you can put
Event.preventdefault (); Block default behavior (form submission)
Rewrite as: return false;
The Event.stoppropagation () can also be used to bubble the event; Stop event bubbling
Rewrite as: return false;
04. Event Capture
05. Properties of the Event object
Attribute details for Event objects please refer to: http://www.w3school.com.cn/jsref/dom_obj_event.asp
The above in-depth understanding of the events in jquery bubble is small to share all the content of everyone, hope to give you a reference, but also hope that we support the cloud habitat community.