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

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