This blog is a personal self-study record, if there is any deficiency, please criticize and correct.
preface
Code:
<div class Grandpa = ><div class = dad>
<div class = son>The text</div>
</div></div> <! Add event listener for three divs fnYe/ fnBa/ dnErCopy the code
Excuse me 1: Who did you click?
- Click on the text, calculate not click son?
- Click on the text, does that count as clicking dad?
- Click text, does it count as click grandpa?
Question 2: call order
- Click on the text and which of the fnYe/ fnBa/ dnEr functions is called first?
- Answer: Either
- IE5 thinks fnEr is called first, netscape thinks fnYe is called first
- Finally, the W3C publishes the standard
W3C states that browsers should support two call sequences simultaneously: first: grandfather, father, and son to see if functions are listening (from outside to inside) and then: son, father, and grandfather to see if functions are listening (from inside to outside)Copy the code
Event capture and event bubbling
- Looking for a listener from the outside in is called event capture
- Look for the listener function from the inside out, called event bubble
- Capture first, then bubble
W3C event model
addEventListener
Time binding API
/ / IE 5:
.attachEvent('onclick', fn) / / the bubbling
/ / netscape:
.addEventListener('click', fn) / / capture
// W3C:
.addEventListener('click', fn, bool)
// If bool is not passed or falsy, go bubble
// if bool is true, go capture
Copy the code
A summary
Question:
- The son gets clicked. Does that count as clicked dad? Calculate the answer:
- Call dad’s function first or son’s function first? Answer: According to the W3C event model, capture and bubble first, from father to son, and then from son to father
Capture and bubble:
- Capture: call dad’s listener function first
- Bubble: Call the son’s listener function first
W3C event model
- Capture first, then bubble? (But it stops bubbling)
- Notice that events are passed to all listener functions
- After the event ends, the object no longer exists
Target and currentTarget
The difference between
- Target is the element that the user operates on
- CurrentTarget is an element that programmers listen on
- This is currentTarget and is not recommended
For example,
<span> Text </span> </div>Copy the code
- The user clicks on the text
- The target is the span
- CurrentTarget is div
Special case
- When only one div is being listened on (regardless of both parent and child being listened on)
- Fn listens for click events in both capture and bubble phases, respectively
- Who listens first, who executes first
To prevent a bubble
Capture cannot be cancelled, but bubbling can
e.stopPropagation
(e)=>{
e.stopPropagation()
}
Copy the code
Generally used to encapsulate some independent components
Do not cancel bubbling
The Scroll event cannot be canceled
Click to view documents
Summary 2
Target and currentTarget
- One is what the user clicks on, one is what the developer listens to
To prevent a bubble
- e.stopPropagation()
Characteristics of events
- Bubbles indicates whether or not Bubbles
- Cancelable indicates whether developers are supported to cancel bubbling
- For example, Scroll does not support unbubbling
How to disable scrolling
- Unwheel and TouchStart default actions for specific elements
Event delegation
Scene 1:
- If you want to add click events to 100 buttons, what do you do?
- Answer: Listen for the ancestor of the 100 buttons and wait for the bubble to determine if Target is one of the 100 buttons
Scene 2:
- You want to listen for click events for elements that do not currently exist.
- Answer: Listen for ancestors, and then click to see if it’s the element I want to listen for
Event delegation is actually pretty straightforward
- Using the event bubbling principle, place event listeners on ancestor elements (such as parent elements, grandfather elements).
advantages
- Save the number of listeners
- You can listen for dynamically generated elements
Encapsulating event delegate
function on(eventType, element, selector, fn){ if(! (element instanceof Element)){ element = document.querySelector(element) } element.addEventListener(eventType, (e) => {const t = e.target if(t.matches(selector)){fn(e)}})} // Add a listener to an element and see if the current target matches that selector. If not, do not callCopy the code