DOM event reference

DOM events are sent to notify the code of what has happened. Each Event is an object that inherits from the Event interface and can include custom member properties and functions to get more information about when the Event occurs. Events can represent anything from basic user interactions to automatic notifications that occur in the render model.

DOM event mechanism

Start with a code example

HTML code block:

<div id="grandfather"> <div id="father"> <div id="child">Copy the code

Grandfather >.father>.child add event listener fngFA/fnFA/FNCHD to these divs

Question 1: If you click the text, does it count as clicking child or father or grandfather? Answer: Both. Question 2: Which function in fngfa/fnfa/FNCHD is called first when the text is clicked? A: Either way.

Therefore, to solve the problem of the flow of events (the order in which events occur) in the page. Microsoft and Netscape proposed the concept of event bubbling and event capture, respectively. Event bubbling, where events start at the innermost element and propagate up to the Document object. Event capturing occurs when events start in the outermost layer and propagate down to the most concrete elements. In 2002, the W3C published the standard. Document name: DOM Level 2 Events Specification. It states that browsers should support both orders. Furthermore, the event capture invocation order is first followed by the event bubble invocation order.

Event flow invocation diagram

Question: fngFA/fnFA/FNCLD is called twice. A: No, the developer has to choose whether to place the calling function in the capture or bubble phase from the start.

Event binding API

IE 5*: child.attatchEvent(‘onclick’, fn) // Bubble Netscene: child.addeventListener (‘click’, fn) // capture W3C: child.addEventListener(‘click’, fn, bool)

If bool is not passed or falsy, let fn go through the bubbling phase. That is, when the browser finds that the child has a FN listener during the bubbling phase, fn is called and events are provided.

If bool is true, let fn go through the capture phase, that is, when the browser finds that the child has a FN listener during the capture phase, fn is called and the event information is provided.

Schematic diagram of developer’s selection of FN:

Click: Capture and bubble sample code

Click: Capture and bubble demo

Code diagram

Event Other Operations

Target and currentTarget. E. target is the element that the user operates on. E. currentTarget is the element that the programmer listens on.

For example, div>span{text}, the user clicks on the text e.target to be span e.currenttarget to be div

A special case is that when only one div is being listened on (regardless of both the parent and the child being listened on at the same time), fn listens for click events in the capture phase and the bubble phase, respectively

For example, the code

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

Will F1 or F2 be executed first? If two rows are transposed, which one should be executed first? Incorrect answer: F2 first. Correct answer: Who listens first who executes first. Bottom line: This is a special case.

Cancel the bubbling

E.toppropagation () interrupts bubbling and the browser does not go up. It is generally used to encapsulate some separate components.

You cannot block the default action

There are some things that can’t prevent the default action. MDN searches for scroll events, and you can see Bubbles and Cancelable Bubbles which means whether the event Bubbles, and all Bubbles can be cancelled Cancelable which means whether the developer can prevent the default action. It has nothing to do with bubbling. When searching, it is recommended to read the English version, the Chinese version is not complete, as shown below:

Episode: How to stop scrolling

The Scroll event does not block the default action: blocking the default scroll action does not work because scroll events occur first. You can prevent scrolling by blocking the default actions of wheel and TouchStart but you have to be careful to locate the element where the scroll bar is located.

Also, in CSS use:

overflow:hidden ::-webki-scrollbar { width: 0 ! important }Copy the code

You can just cancel the scroll bar. However, JS can still modify scrollTop

Custom events

The browser has more than 100 built-in events. You can view them in the MDN event list

Q: Can developers customize an event in addition to their own event? Answer: Yes.

button1.addEventListener('click',()=>{
    const event = new CustomEvent("newattr",
    {
    "detial":{name:'myname',age: 18}
    })
    button1.dispatchEvent(event)
})
Copy the code

The button element adds a click to trigger the Newattr event developer tool to print:

MDN Event reference