Deep understanding of event bubbling _jquery in jquery

1. What is bubbling

eg

<! DOCTYPE html>  

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

<! DOCTYPE html>
 
 

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.