This may be the most concise JS event bubbling mechanism + block default events Explained

Source: Internet
Author: User

Hey JS event bubbling mechanism and blocking bubble blocking default behavior seems to never be clear, remember forget to remember ... Drunk.

Once this article has been written, next time forget to call yourself slap, forget a slap

  The first thing to understand is the two concepts--event and event flow

  An event refers to an action performed by the user or the browser itself, also known as the original event model, such as the onclick, etc.

Event flow refers to the order in which events are received from the page, that is, when an event is generated, the propagation of the event is called the event stream.

Event bubbling:

Bubble up from the event target to the document-- from inside to outside

 IE 5:div--body--document;

 Ie6:div--body--html--document;

  Mozilla:div--body--html--window

* * It is worth noting that ie8-can only be propagated to document.

Event Capture:

Trigger from the outermost document, and finally to the most accurate event target- from the outside to the inside

* * and event bubbling is the opposite, the intention is to capture it before the event reaches its target

Dom Event Flow:

Two event models-event bubbling and event capture-are supported at the same time, but the capture occurs first. Both events touch all objects in the DOM, starting with the document object and ending in the Document object.

The DOM standard specifies that there are 3 stages of event flow:

  Event Capture Phase -- in target phase -- event bubbling Phase

A picture to cover:

When binding an event, you can choose whether to use event capture or event bubbling:

With the AddEventListener function, it has a third parameter, if set to True, is the event capture and, if false, event bubbling

true: Capture

False: Bubbling

Element.addeventlistener (' Click ', DoSomething,true)

It is worth noting that IE only supports event bubbling, does not support event capture, and does not support AddEventListener, but it can use another function attachevent to bind

Element.attachevent (' onclick ', dosomething)

Prevent event propagation!!! Remember the whole life did not remember the place!!!

Ordinary:

Stoppropagation ()

Ie:

Canclebubble = true;

During the capture process, the bubbling process after stoppropagation does not occur.

        function stopbubble () {            if(e&& e.stoppropagation) {                e.stoppropagation ();   // Non ie            } Else {                true;            }        }

Block Default Events

Ordinary:

Preventdefault ()

Ie:

Window.event.returnValue = false;

        function Stopdefault () {            if(e&& e.preventdefault) {                // non ie            } Else {                false;            }        } 

Summarize:

Event bubbling-from inside to outside from A-div-body-html-document-window (low version IE to document)

Event capture-from outside to inside from Window-html-body-div-a

Stop bubbling

General--e.stoppropagation

Ie--window.event.canclebubble=true;

Block Default Events

General--e.preventdefault

Ie--window.event.returnvalue = false;

This may be the most concise JS event bubbling mechanism + block default events Explained

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.