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 phaseonclickEvent 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 phaseonclickEvent 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:

  1. Number of listens saved (memory)
  2. You can listen for dynamic elements

Encapsulating event delegates

Requirements:

  • Let me write a function like thison('click', '#testDiv', 'li', fn)
  • When the user clicks#testDivIn thelielementfnfunction
  • 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