JavaScript event mechanism understanding and in-depth

I. Capturing and bubbling of events

The event flow defined by the "DOM2 level event" consists of three phases: the event capture phase, the target stage, and the event bubbling phase. The following figure can be interpreted graphically (understanding the necessary graphs for capturing and bubbling)

According to the diagram we wrote the code to verify,

<div id= "Parent" > <div id= "Child" > Child</div></div><script type= "Text/javascript" >varp = document.getElementById (' Parent '), C= document.getElementById (' child '); P.addeventlistener (' Click ',function(e) {Console.log (' Parent node capture ')    }, true); C.addeventlistener (' Click ',function(e) {Console.log (' Child node capture ')    }, true); C.addeventlistener (' Click ',function(e) {Console.log (' Sub-node bubbling '); }, false); P.addeventlistener (' Click ',function(e) {Console.log (' Parent node bubbling ')   }, false);</script>

View Code

Results at a glance

But here is a question, is also the original Ali's interview topic,

What if a DOM is bound to two events, a capture, a bubbling, an event execution order,

This is in the reference to the small Beard Brother wrote JS event mechanism of the blog, learned that the order is related to the binding sequence, then let's try,

<div id= "Parent" style= "height:300px; Background-color: #ccc; " > <div id= "Child" > Child</div> <p>other child</p></div><script type= "Text/javascript" >varp = document.getElementById (' Parent '), C= document.getElementById (' child '); P.addeventlistener (' Click ',function(e) {Console.log (' Parent node bubbling ')    }, false); C.addeventlistener (' Click ',function(e) {Console.log (' Sub-node bubbling '); }, false); C.addeventlistener (' Click ',function(e) {Console.log (' Child node capture ')    }, true); P.addeventlistener (' Click ',function(e) {Console.log (' Parent node capture ')    }, true);</script>

View Code

When you click 1 o'clock

When you click 2 o'clock

When you click 3 o'clock

We found that the 1 and 3 cases were first bubbling and then captured, and in the code I wrote the bubbling binding event to the front of the capture, causing the effect

The event destination node binds both the bubbling event and the capture event, at which point the order of execution is executed in the order of the binding

The second reason why the order is first captured after bubbling, because the event destination and other child no binding event.

There is a corresponding block of capture and bubbling, stoppropagation this should be the next step to prevent the propagation of events, stopimmediatepropagation this method can be bound to the elements of the event can be stopped, you can understand.

Attached, easily confused,

Event.prevetdefault () + = default Event event.stoppropogation () = Event capture, event bubbling, event proxy return false = = inside jquery The above two implementations are called. Second, the event delegation mechanism

The solution to the "too many event handlers" issue is the event delegate, which takes advantage of event bubbling and specifies only one event handler to manage all events of this type.

For example, UL under the Li binding event, generally traverse Li, to each Li binding event, this has two problems, 1, if it is the new Li, we need to rebind. 2, if Li has a lot, that takes up a lot of memory.

Then we can be entrusted with the event at this time, commissioned in the dictionary to explain, their own affairs entrusted to others on behalf of the processing. That is the event I do not put on the DOM to be processed, that is, using the bubbling principle, the event is bound to the parent. And then according to each trigger event object to find the target, speaking of this, but also to say that the compatibility problem, the standard of the Internet, Event.target can, IE is indeed event.srcelement. To this I think we should think of an artifact, jquery, right, he inside the binding events are compatible, are packaged well, then he is how to deal with it, well, to read the source.

JavaScript event mechanism understanding and in-depth