Part 1: Event mechanism

Event mechanism

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

The interface mainly provides three instance methods.

  • AddEventListener: Listener function for binding events
  • RemoveEventListener: Removes the event listener function
  • DispatchEvent: triggers events

Capture and bubble

Propagation between child elements and parent elements after an event occurs can be divided into three stages.

(This three-stage propagation model allows the same event to be fired on multiple nodes.)

  1. Looking for listening functions from the outside in is event capture
  2. Triggers an event on the target node
  3. Looking for listening functions from the inside out is event bubbling

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 fires, and if there is none, it continues to check up to the uppermost element, a process known as bubbling. (If there is a listener function, execute it and provide the event information, if there is no listener function, skip it)

The uppermost object of event propagation is window. In the preceding example, the sequence of event propagation is window, document, HTML, body, parent node and target node in the capture phase, and target node, parent node, body, HTML, document and window in the bubble phase.

DOM event propagation has three phases: capture phase, target phase, and bubble phase

addEventListener

Event binding API

  • IE5* : baba. AttachEvent (‘onclick’,fn) // Bubble
  • Netscape: baba. AddEventListener (‘click’,fn) // Capture
  • The W3C: baba. AddEventListener (‘ click ‘, fn, Boolean)

If bool is not passed or falsy

Let FN bubble, that is, the current browser in the bubble phase finds that BABA has fn listening function, will call fn, and provide the event information

If bool is true

Let FN go, that is, when the browser finds that BABA has fn listening function during the capture phase, it will call fn and provide the event information

conclusion

Two questions:

Son is clicked, calculate do not click Lao Tzu?

  • calculate

So call my function first or call my function first?

  • Can be

Capture the bubbling

Capture says to call dad’s listening function first

Bubble said to call his son’s listener first

W3C Event Model

Capture first (first dad => son) and then bubble (second son => dad)

Notice that the e object is passed to all listening functions

After the event, the e object does not exist

Target v.s. currentTarget

The difference between:

E. currenttarget – the element on which the user operates. E. Currenttarget – the element on which the programmer listens. This is E. Currenttarget and is not recommended

For example:

Div >span{text}, the user clicks on the text e. tip to span, e. tip to div

A special case

Background:

Only one div will be listened on (regardless of the parent being listened on simultaneously)

Fn listens for the click event in the recapture and bubble phases respectively

What the user clicks on is what the developer listens to

Code:

div.addEventListenter('click',f1)

div.addEventListenter('click',f2,true)

Copy the code

Will f1 or F2 come first?

What if I transpose the two?

Conclusion: whoever listens first executes first.

E.toppropagation () : Cancels bubbles

To interrupt the bubble propagation (), the browser no longer goes up

Typically used to encapsulate some independent component

Note: Capture cannot be cancelled but bubbling can

You cannot unbubble some events you cannot unbubble

You can refer to the English version of MDN Bubble

How to disable scrolling

Cancels the default actions for wheel and TouchStart for specific elements

Part 2: Event delegation

What is event delegation

Event delegates manage all events of a certain type by specifying only one event handler using event bubbling. Colloquially, this means that an element responds to an event (click,……) Delegate to another element; In general, the one or a set of events entrusted to its parent element layer or outer elements, more real binding events is the outer element, when the incident response to need binding element, through the event bubbling mechanism bind the event to trigger its outer elements, and then in the outer elements to perform the function.