The old-fashioned js event bubbling mechanism

Hey, the js event bubbling mechanism and preventing bubbling to prevent the default behavior seem to never be clear, forget it. . . drunk

After writing this article, next time you forget to slap yourself, forget to slap once

　　First of all, two concepts must be understood - events and event streams

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

　　Event flow refers to the order in which events are received from the page, that is to say, when an event occurs, the propagation process of this event is called event flow.

Event bubbling:

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

　　IE 5：div--body--document;

　　IE6：div--body--html--document;

　　mozilla：div--body--html--window

**It's worth noting that IE8- can only propagate to document.

Event capture:

　　Fires from the outermost document and ends at the most precise event target - from outside to inside

**Contrary to event bubbling, intended to catch the event before it reaches its goal

DOM event flow:

　　Both event models are supported - event bubbling and event capture, but capture occurs first. Both events touch all objects in the dom, starting with the document object and ending with the document object.

　　The DOM standard specifies that there are 3 phases to the flow of events:

　　Event capture phase - in target phase - event bubbling phase

A picture to cover it up:

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

Through the addEventListener function, it has a third parameter. If it is set to true, it means that the event is captured. If it is false, it means that the event is bubbling.

true: capture

false: bubbling

element.addEventListener('click',doSomething,true)

It is worth noting that IE only supports event bubbling, not event capture, nor addEventListener, but it can be bound using another function attachEvent

element.attachEvent('onclick',doSomething)

Stop the event from spreading! ! ! I remember a place I haven't remembered for a lifetime! ! !

ordinary:

stopPropagation()

IE：

cancleBubble = true;

During the capture process, the bubbling process behind stopPropagation will not occur
        function stopBubble () {
             if (e && e.stopPropagation) {
                e.stopPropagation ();   // Non-IE 
            } else {
                window.event.cancleBubble = true;
            }
        }

Block default events

ordinary:

preventDefault()

IE：

window.event.returnValue = false;

        function stopDefault(){
            if(e&& e.preventDefault){
                e.preventDefault(); //非IE
            }else{
                window.event.returnValue = false;
            }
        }

总结：

事件冒泡——从里到外从a-div-body-html-document-window（低版本IE到document）

事件捕获——从外到里从window-html-body-div-a

阻止冒泡

普通——e.stopPropagation

IE——window.event.cancleBUbble=true;

阻止默认事件

普通——e.preventDefault

IE——window.event.returnValue = false;

The old-fashioned js event bubbling mechanism

Guess you like