Introduced a.
HTML code for a click event:
<div class= "papa" > <div class= "papa" > <div class= "papa" >Copy the code
< div name = “fnYe”, < div name = “fnBa”, < div name = “fnEr”, < div name = “fnYe”, < div name = “fnBa”, < div name = “fnYe” >
Question 1: Who was clicked
Does clicking on text count as clicking on son? Does it count click Dad? Does it count click Grandpa?
A: Both.
Question 2: Call order
Click on the text, which function in fnYe/fnBa/fnEr is called first?
Answer: either way.
For the above click event call order, IE5 thought that call fnEr first, netscape thought that call fnYe first, later W3C released standards, stipulated that browsers should support both call order.
First, check whether there is function listening in the order of grandpa => dad => son, and then check whether there is function listening in the order of son => dad => grandpa. If there is a listening function, call it and provide the event information. If there is no listening function, skip it.
DOM event model
Event capture and event bubble
Event bubbling and capture are two mechanisms that describe what happens when two event handlers of the same type are activated on an element.
- Event capture: look for listening functions from the outside in (grandpa => Dad => son)
- Event bubble: Look for listener functions from inside out (son => Dad => Grandpa)
When an event occurs on an element that has a parent element, modern browsers run two different phases – the capture phase and the bubble phase.
During the capture phase:
- The browser checks the element’s outermost ancestor
<html>
, whether one was registered during the capture phaseonclick
Event handler, if so, run it. - And then, it moves to
<html>
Click on the element’s next ancestor and do the same, then click on the element and the next ancestor, and so on until you reach the element that was actually clicked.
In the bubbling phase, the opposite is true:
- The browser checks to see if the element actually clicked is registered in the bubble phase
onclick
Event handler, if so, run it. - Then it moves to the next immediate ancestor element and does the same, and then the next, and so on, until it arrives
<html>
Elements.
The DOM event flow
When an HTML element generates an event, the event is propagated in the path between the element node and the root node, and the nodes through which the path passes receive the event. This propagation process is called DOM event flow.
In a DOM compliant browser, the flow of events is divided into three phases: capture phase – target phase – bubble phase.
The first thing that happens is event capture, which provides an opportunity to intercept events. Then the actual target receives the event. The last is the bubbling phase, in which we respond to events.
A special case
Background: Only one div is being listened on (regardless of the parent being listened on). Fn listens for the click event during the capture phase and bubble phase, respectively. The user clicks on the element that the developer listens on.
Code:
Div. AddEventListener ('click', f1) // Bubble div. AddEventListener ('click', f2, trueCopy the code
Question: f1 or F2? If two lines are swapped, which one goes first?
Incorrect answer: f2 execute first
Correct answer: who listens first who executes first!
addEventListener
Question about click events: isn’t fnYe/fnBa/fnEr both called twice?
A: No! Developers can use addEventListener() to choose whether to place fnYe in the capture or bubble phase.
- Event binding API
IE5* : baba. AttachEvent (‘onclick’, fn) // Bubble
Netscape: baba. AddEventListener (‘click’, fn) // Capture
W3C: baba. AddEventListener (‘click’, fn, bool)
- If bool is not passed or falsy
Let FN bubble, that is, when the browser finds that BABA has fn listening during the bubble phase, it calls fn and provides 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.
target v.s. currentTarget
The difference between
- E.t. Arget – The element that the user operates on
- E. Currenttarget – the element on which developers listen
- This is E. Currenttarget, but is not recommended
For example,
Div > span{text}, the user clicks on the text
- E. arget is a span
- E.c. with our fabrication: urrentTarget is div
Cancel bubble – Capture cannot be cancelled, but bubble can
In modern browsers, by default, all event handlers are registered during the bubbling phase.
To stop the bubble and stop the browser going up, you can use stopPropagation().
Event delegate
Event delegation
Bubble also allows us to use event delegation – the concept relies on the fact, if you want to click any one in the big quantum elements can run a piece of code, you can set the event listeners on its parent, and lets the child nodes on the events of the bubble to the parent node, rather than set separately for each child node event listeners.
Application scenario:
Scenario 1: What if I want to add click events to 100 buttons?
A: Listen for the parent of the 100 buttons and determine if target is one of the 100 buttons when it bubbles.
Scenario 2: What if I want to listen for click events on elements that do not currently exist?
Answer: Listen to the parent node, wait to click to see if it is the element to listen to first.
Thus, the advantages of event delegation are:
- Number of listens saved (memory)
- You can listen for dynamic elements
Encapsulating event delegates
Requirements:
- Let me write a function like this
on('click', '#testDiv', 'li', fn)
- When the user clicks
#testDiv
In theli
elementfn
function - Event delegates are required
Code to determine if target matches ‘li’ :
function on(eventType, element, selector, fn){ if(! (element instanceof Element)){ element = document.querySelector(element) } element.addEventListener(eventType, (e) => {const t = e. selector if(t.matches(selector)){// determine whether the element the user is working on matches the selector.Copy the code