DOM events and event delegates

Posted by bhanu on Fri, 14 Jan 2022 01:14:56 +0100

Click event

In 2002, W3C released the DOM Level 2 Events Specification

Specify that the browser needs to support two call sequences at the same time:

First, see if there is function monitoring in the order of Grandpa = > dad = > son

Then see if there is function monitoring in the order of son = > father = > Grandpa

Call if there is a listening function and provide event information. Skip if there is no listening function

Finding listening functions from outside to inside is called event capture

Find the listening function from the inside out, which is called event bubbling

addEventListener

Event binding API

  • IE5: baba.attchEvent('onclick',fn) / / bubbling
  • Netscape: Baba Addeventlistener ('click ', FN) / / capture
  • W3C: baba.addEventListener('click',fn,bool)

If bool is true

  • Let fn go to capture, that is, when the browser finds that baba has fn listening parameters in the capture phase, it will call fn and provide event information

If it does not pass bool or false

  • Let fn go bubbling, that is, when the browser finds that baba has fn listening parameters in the bubbling stage, it will call fn and provide event information

Code example

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="level1 x">
  <div class="level2 x">
  </div>
</div>
</body>
</html>

css

* {
  box-sizing: border-box;
}
div[class^=level] {
  border: 1px solid;
  border-radius: 50%;
  display: inline-flex;
}
.level1 {
  padding: 10px;
  background: purple;
}
.level2 {
  padding: 10px;
  background: blue;
}
.x{
  background: transparent;
}
JS

const level1 = document.querySelector('.level1')
const level2 = document.querySelector('.level2')

let n = 1

level1.addEventListener('click', (e)=>{
  const t = e.currentTarget
  setTimeout(()=>{  
    t.classList.remove('x')
  },n*1000)
  n+=1
})
level2.addEventListener('click', (e)=>{
  const t = e.currentTarget
  setTimeout(()=>{  
    t.classList.remove('x')
  },n*1000)
  n+=1
})

target and currentTarget

difference

  • e.target - the element of the user action
  • e.currentTarget - the element that the programmer listens on

give an example

  • div.span {text}
  • User clicks text
  • e.target is span
  • e.currentTarget is div

special case

  • Only one div is monitored (regardless of whether father and son are monitored at the same time)
  • fn listen for click events in the capture phase and bubble phase respectively
  • The element clicked by the user is monitored by the developer
  • This is a special case. Who listens first and who executes first

Cancel bubbling

  • Capture cannot be cancelled, bubbling can be
  • e.stopPropagation() can interrupt bubbling and stop the browser from going up
  • It is generally used to encapsulate some independent components

The default action cannot be blocked

  • Some events cannot prevent default actions
  • MDN searches for scroll event and finds Bubbles and Cancelable
  • Bubbles means whether the event bubbles. All bubbles can be cancelled
  • Cancelable means whether developers can block default events
  • Cancelable has nothing to do with bubbling

How do I prevent scrolling?

  • The scroll event cannot block the default action
  • It is useless to prevent the default action of scroll, because there is a scrolling event before scrolling
  • To prevent scrolling, you can prevent the default actions of wheel and touchstart
  • You need to find the element where the scroll bar is located
x.addEventListener('wheel', (e)=>{
  e.preventDefault()
})
x.addEventListener('touchstart', (e)=>{
  e.preventDefault()
})
  • But the scroll bar works
  • Available CSS scroll bar width: 0
::-webkit-scrollbar{
   width:0 !important
}
  • Or use CSS to use overflow: hidden
  • You can cancel the scroll bar directly, but JS can still modify the scrollTop at this time

Custom event

  • The browser comes with more than 100 events in total. For a detailed list, see MDN
  • Developers can customize events in addition to their own events

Event delegation

How to add click events to 100 buttons?

A: listen to the ancestors of the 100 buttons and judge whether the target is one of the 100 buttons when it bubbles

How to listen for click events of elements that do not exist at present?

A: listen for ancestors. When clicking, see if you want to listen for elements

advantage

  • Number of listeners saved (memory)
  • Can listen for dynamic elements

Does JS support events?

  • Support or not. DOM events do not belong to the function of JS, but belong to the function of DOM provided by the browser
  • JS just called the addEventListener provided by DOM

* this article is an original article by Kun you Beiming. The copyright belongs to himself and hungry valley. The source must be indicated when reprinting

Topics: Javascript DOM