DOM event model

DOM event operations (listening and firing) are defined in the EventTarget interface. This interface is deployed on all node objects, as well as other built-in browser objects that require event communication (e.g., XMLHttpRequest, AudioNode, AudioContext).

This interface mainly provides three instance methods.

RemoveEventListener // removeEventListener // trigger eventCopy the code

The event model

Propagation after the occurrence of an event, propagation between child elements and parent elements will be divided into three stages.

(This three-phase propagation model allows the same event to be triggered at multiple nodes.)

  1. Looking in from the outside is called event capture
  2. Fires an event at the target node
  3. The inside-out listener is the event bubble

Popular point is when an event is triggered, the browser will automatically from the user the most superior operating outside the label tag to check for the same event, if there is a trigger, if there is no continued to check down know user operations, this process is called capture, the browser will continue to be superior to continue operation by the user label label check, If there is an identical event, it is fired. If there is no such event, it continues to be checked up to the uppermost element, a process called bubbling. (Execute if there are listener functions and provide event information, skip if there are no listener functions)

The uppermost object of event propagation is Window. The sequence of event propagation in the above example is window, Document, HTML, body, parent node and target node (i.e. from large to small) in the capture stage. In the bubbling phase, it is the target node, parent node, body, HTML, Document, window (i.e. small to large).

DOM event propagation has three phases (W3C standard) : capture phase, target phase, and bubble phase

Click on the event

There is the following code

<div class="grandfather">
  <div class="father">
    <div class="son">123</div>
  </div>
</div>
Copy the code

Add event listener fnYe/fnBa/fnEr to each of the above divs

When clicking “123”, grandpa, father and son can be counted as clicked; When “123” is clicked, either of the fnYe/fnBa/fnEr functions will work.

IE5 decided to call fnEr first, Netscape decided to call fnYe first, and finally met W3C

Looking for listeners from outside to inside is a process called event capture (netscape)

Baba.addeventlistener ('click', fn) // captureCopy the code

Looking for listeners from the inside out is a process called event bubbling (IE5)

Baba.attachevent ('onclick', fn) // bubbleCopy the code

The W3C has come up with a standard as a peacemaker

baba.addEventListener('click', fn, bool)
Copy the code

In the above code:

If bool is not passed or falsy, let fn bubble, that is, when the browser discovers that BABA has fn listeners during the bubble phase, fn will be called and the time information will be provided.

When bool is true, let fn go capture, that is, when the browser discovers that BABA has fn listeners during the capture phase, fn is called and the event information is provided.

conclusion

Capture bubble capture: Call dad’s listener bubble: call son’s listener first

The W3C event model catches (dad => son) and then bubbles (Son => Dad) functions are not called twice, and developers can decide whether to place the function to be called in the capture or bubble phase

Note the following two points:

  • The e object is passed to all listeners
  • After the event ends, the e object does not exist

Target vs. currentTarget

This is e.currenttarget, not recommended. This is e.currenttarget

Example: div>span{text} // the user clicks on the text above

A special case

Fn listens for click events in capture phase and bubble phase, respectively, when the user clicks on the same element that the developer is listening for

There is the following code:

div.addEventListenter('click',f1)
div.addEventListenter('click',f2,true)
Copy the code

Is f1 or F2 executed first? If you switch these two lines of code, who will execute first? A: The first to be monitored is the first to execute.

E.toppropagation () : // Cancel bubble Propagation

e.stopPropagation() 
Copy the code

Breaking the bubble, the browser no longer goes up is generally used to encapsulate some individual components

Note: capture cannot be cancelled but bubbling can