Event bubbling in jquery

1. What is bubbling

eg

<! DOCTYPE html>"http://www.w3.org/1999/xhtml">"Content-type"Content="text/html; Charset=utf-8"/> <title> Event bubbling </title> <script src=".. /.. /js/jquery1.11.1.js"></script> <script type="Text/javascript">$ (function () {//binding The Click event for a SPAN element$('span'). Bind ('Click', function () {varTXT = $ ('#msg'). HTML () +'<p> inner span element is clicked </p>'; $('#msg'). html (TXT);            }); //binding The Click event for a SPAN element$('#content'). Bind ('Click', function () {varTXT = $ ('#msg'). HTML () +'<p> the outer div element is clicked </p>'; $('#msg'). html (TXT);            }); //binding The Click event for a SPAN element$('Body'). Bind ('Click', function () {varTXT = $ ('#msg'). HTML () +'<p>body elements are clicked </p>'; $('#msg'). html (TXT);        });            }); </script>"content">Outer DIV Element<span> inner span elements </span> </div> <div id="msg"></div></body>
When you click the ' inner span element ', which triggers the Click event of the <span> element, 3 records are output
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. Issues caused by event bubbling
01. Event Object
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: Events Object });
02. Stop Event Bubbling
The Stoppropagation () method is provided in jquery to stop event bubbling
For example, the span element binds the Click event:
 //binding The Click event for a SPAN element$('span'). Bind ('Click', Function (Event) {//Event: Events Object                varTXT = $ ('#msg'). HTML () +'<p> inner span element is clicked </p>'; $('#msg'). html (TXT); Event. Stoppropagation ();//Stop event bubbling});
When you click the ' inner span element ', which triggers 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, clicking a hyperlink jumps, clicking the ' Submit ' form commits, and sometimes blocking 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
<! DOCTYPE html>"http://www.w3.org/1999/xhtml">"Content-type"Content="text/html; Charset=utf-8"/> <title></title> <script src=".. /.. /js/jquery1.11.1.js"></script> <script type="Text/javascript">$ (function () {$ ('#sub'). Bind ('Click', Function (Event) {                varUsername = $ ('#username'). Val ();//get the value of an element                if(Username = ="") {//determines whether the emptyAlert'the value of the text box cannot be empty');//Prompt Information                    Event. Preventdefault ();//block default behavior (form submission)                }            });    }); </script>"/">User name:<input type="text"Id="username"/> <input type="Submit"Value="Submit"Id="Sub"/> </form> </body>
If you don't type in the content, you can block the default behavior (form submission)
Summary: You can return false in the event handler if you want to stop bubbling and the default behavior on the event at the same time. This is a shorthand method 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)
Overwrite to:
return false;

You can also put the event bubbling

Event.stoppropagation (); Stop event bubbling
Overwrite to:
return false;

04. Event Capture
05. Properties of the Event object
For information on the properties of an event object, refer to: http://www.w3school.com.cn/jsref/dom_obj_event.asp
Event bubbling in jquery