Event Object (ii)

Source: Internet
Author: User

bubbling and default behavior

If multiple elements overlap in the page, and the overlapping elements are bound to the same event, a bubbling problem occurs.

example, the HTML code is as follows:

<!DOCTYPE HTML><HTML><Head>    <MetaCharSet= "UTF-8">    <title>Event Object</title>    <Scripttype= "Text/javascript"src= "Jquery-1.12.3.js"></Script>    <Scripttype= "Text/javascript"src= "Demo.js"></Script>    <Linkrel= "stylesheet"type= "Text/css"href= "Style.css" /></Head><Body>    <Divstyle= "width:200px; height:200px; Background-color: #ccc;">         <inputtype= "button"value= "button" />     </Div></Body></HTML>

three different element triggering events:

Note: When we click on the document, only the document event is triggered, and when we click on the div layer, we trigger the DIV and document two, and when we click the button, the button, Div, and document are triggered. The order of triggering is from small to large range.
This is the so-called bubbling phenomenon, one layer at a level upward.

jquery provides a way for an event object: Event.stoppropagation (); When this method is set to the event that needs to be triggered, the bubbling behavior of all the upper layers is canceled.

Block bubbling:

// bubbles and Blocks bubble $ ("input"). Click (function(e) {    e.stoppropagation ();   // No bubbles    Alert ("button is triggered! ");}); $ ("div"). Click (function(e) {    e.stoppropagation ();   // No bubbles    Alert ("div layer is triggered!") ");}); $ (document). Click(function() {    alert ("Doc page" is triggered!) ");});

The elements in the Web page will have their own default behavior at the time of operation. For example: Right-click the text box input area, the system menu will pop up, click the hyperlink will jump to the specified page, click the Submit button will submit the data.

such as HTML (partial) code:

<Divstyle= "width:200px; height:200px; Background-color: #ccc;">    <inputtype= "button"value= "button" />    <ahref= "Http://www.ycku.com"Target= "_blank">Ycku.com</a></Div>

jquery Code:

$ ("a"). Click (function(e) {    // block default behavior    alert ("ycku.com");});

Prevent submission of form jumps:

The HTML (part) code is as follows:

<formAction= "123.html"><Divstyle= "width:200px; height:200px; Background-color: #ccc;">    <inputtype= "button"value= "button" />    <ahref= "Http://www.ycku.com"Target= "_blank">Ycku.com</a></Div></form>

Mode ① prohibit submission of form jumps:

// prohibits the form from submitting $ ("input"). Click (function(e)    {// block default behavior    alert ("form submission" );});

Mode ② prohibit submission of form jumps:

// prohibit form submission $ ("form"). Submit (function(e) {    e.preventdefault ();});

Note: If you want the above hyperlink to block the default behavior at the same time and suppress the bubbling behavior, you can write the two methods simultaneously: Event.stoppropagation () and Event.preventdefault (). If these two methods need to be enabled at the same time, there is a shorthand scheme instead, which is to return false directly.

// prevents bubbling and disables the default behavior of $ ("a"). Click (function(e) {    e.preventdefault ();    e.stoppropagation ();    Alert ("ycku.com");});

Or

$ ("a"). Click (function(e) {    alert ("ycku.com");      returnfalse  ;});

Some ways to bubble and default behavior

Method name Describe
Preventdefault () Cancels the default behavior of an element
Isdefaultprevented () Determine if the Preventdefault () method is called
Stoppropagation () Cancel Event Bubbling
Ispropagationstopped () Determine if the Stoppropagation () method is called
Stopimmediatepropagation () Cancels event bubbling and cancels subsequent event handlers for the event
Isimmediatepropagationstopped () Determine if the Stopimmediatepropagation () method is called

The HTML code is as follows:

<!DOCTYPE HTML><HTML><Head>    <MetaCharSet= "UTF-8">    <title>Event Object</title>    <Scripttype= "Text/javascript"src= "Jquery-1.12.3.js"></Script>    <Scripttype= "Text/javascript"src= "Demo.js"></Script>    <Linkrel= "stylesheet"type= "Text/css"href= "Style.css" /></Head><Body>    <formAction= "123.html">     <Divstyle= "width:200px; height:200px; Background-color: #ccc;">         <inputtype= "Submit"value= "button" />         <ahref= "Http://www.ycku.com"Target= "_blank">Ycku.com</a>     </Div>    </form></Body></HTML>

The jquery code is as follows:

$ (document). Click (function() {    alert ("document");}); $ ("div"). Click (function(e) {    alert ("div");}); $ ("a"). Click (function(e) {    e.preventdefault ();    E.stoppropagation ();     // true    // true});

Can also be judged like this:

$ ("a"). Click (function(e) {    e.preventdefault ();    E.stoppropagation ();}); $ ("a"). Click (function(e) {    //true    //true });

Cancel the bubbling and cancel the subsequent event handler function:

$ ("a"). Click (function(e) {    e.stopimmediatepropagation ();     // true    Alert ("A1");}); $ ("a"). Click (function(e) {    alert ("A2");}); $ ("div"). Click (function(e) {    alert ("div");}); $ (document). Click (function() {    alert ("document");});

Event Object (ii)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.