Understanding jquery Event Bubbling _jquery

Source: Internet
Author: User

One, what is jquery event bubbling
In many teaching materials or manuals may involve the concept of event bubbling, the veteran is certainly the most basic concept, but often for beginners may be unfamiliar or never heard. The following is a simple example of how event bubbling can be combined with code examples.
The code example is as follows:

 
 

In the above code, we may just want to click on the anchor point and pop "I'm Third", but the strange thing is that all the parent element-defined Click events will be triggered. This is a typical event bubbling effect. The so-called bubbling event is that if a certain type of event is triggered on an object (such as the Click event of the previous example), then this event propagates to the object's parent object and triggers the same kind of event defined on the parent object. The direction of event propagation is from the bottom to the top, similar to the blisters floating up from the bottom.
Second, how JavaScript blocks event bubbling
Bubbling events can be convenient and sometimes troublesome, and here's a quick way to prevent event bubbling.
The code instance is as follows:

<!
DOCTYPE html>  

Code comments:
1.if (window.event) This is used to compatible IE8 and IE8 browsers.
2. Evt.stoppropagation () This is a standard browser.

In the code above, a cell prevents event bubbling, one that does not stop the event bubbling, and hopes to help everyone learn.

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.