DOM event mechanism

background

At the beginning, IE company according to the order of grandson -> father -> grandfather to see whether there is a function monitor; Netscape follows the order of grandpa -> dad -> grandson to see if there is a function listening; Nobody disagreed with anyone, and then the W3C published the standard

Released in 2002, the W3C standards, the document called: DOM level2 stores Events Specification, regulation should browsers support two kinds of calls to order, first of all, according to the grandfather – > father – > look grandson order have the function to monitor, then in accordance with the order of the grandson – > father – > grandpa look have the function to monitor. If there are listener functions, call them and provide event information. If not, skip them

Capture and bubble

Finding listeners from the outside in is called event capture, grandpa -> dad -> grandson

Looking for listener functions from the inside out is called event bubbling, grandson -> dad -> grandpa

The execution process is: capture, then bubble

AddEventListener event binding API

IE5* : baba. AttachEvent (‘onclick’,fn) // bubbles

Netscape: baba.addeventListener (‘click’,fn) // capture

AddEventListener (‘click’,fn,bool)

If bool is not passed or falsy: let fn bubble, that is, when the browser finds that BABA has fn listeners during the bubbling phase, fn is called and events are provided

If bool is true: let fn go capture, that is, when the browser discovers that BABA has fn listeners during the capture phase, fn will be called with event information

Examples: Code examples

Cancel the bubbling

Capture can’t be undone, but bubbling can, all bubbling can be undone, default actions can be undone or not

E.toppropagation () can interrupt the bubble, the browser will no longer go up, popular say, someone beat me, I solve, don’t tell my father

Purpose: Generally used to encapsulate some independent components

Examples: Code examples

Custom events

Create CustomEvent [event = new CustomEvent(typeArg, customEventInit);]

XXX. AddEventListener ('click',()=>{// XXX adds a listening event const event =new CustomEvent('frank',{// create a CustomEvent [*event* =new CustomEventInit typeArg CustomEvent (*, * * *);. Detail :{name:' Frank ',age:18}, // The optional default value is null for any type of data, which is a value associated with the event Dubbles :true, // a Boolean value indicating whether the event can bubble. Cancelable :false // a Boolean, Said the incident could cancel}) XXX. DispatchEvent (event) / / to a specified event target distributing a [event] (https://developer.mozilla.org/zh-CN/docs/Web/API/Event),})Copy the code

Event delegation

Delegate an element to listen for the event I was listening for

Advantages: save listening memory; You can listen for dynamic elements;

Example:

Scenario 1: What if you want to add click events to 100 buttons? Listen for the ancestor of the 100 buttons and wait for the bubble to determine if target is one of the 100 buttons. Code: Code examples

Scenario 2: You want to listen for click events for elements that do not currently exist. What do you do? Listen for ancestors, and then click to see if it is the element I want to listen for:Code sample