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