error delete event
class Goods {
addEv() {
// 添加mousemove事件
// document.addEventListener('mousemove', this.changeEv.bind(document)) //错误一
// document.addEventListener('mousemove', this.changeEv) //错误二
document.addEventListener('mousemove', this.changeEv.bind(this)) //错误三
}
changeEv() {
console.log('触发事件', this)
// 删除mousemove事件
// document.removeEventListener('mousemove', this.changeEv.bind(document)) //错误一
// document.addEventListener('mousemove', this.changeEv)//错误二
document.removeEventListener('mousemove', this.changeEv.bind(this))//错误三
}
}
Error 1, error 2 renderings
Error three renderings
2 ways to delete events correctly
- Use a variable or array to store the function to be executed, and this variable or array element returns a function .
Method 1 Arrow function: this will point to the parent, without changing this .
Method 2 Ordinary function: Execute the function once, and then return a function to realize the delete event
code demo
class Goods {
constructor() {
// 每次触发事件都调函数
// 方式1
this.ev = _ => this.changeEv()
// 方式2
this.docEvFun = function (e) {
return this.changeEv(e)
}
}
addEv() {
// 添加mousemove事件
//调用方式1
document.addEventListener('mousemove', this.ev)
//调用方式2
//document.addEventListener('mouseup', this.docEvFun(ev))//可注销
}
changeEv(ev) {
console.log('触发事件', this)
// 删除mousemove事件 方式1
document.removeEventListener('mousemove', this.ev)
// 删除mousemove事件 方式2
// document.removeEventListener('mousemove', this.docEvFun)
}
}
in conclusion
- Every time an event is added, a brand new function is created , with a focus on brand new .
- If you do not use a variable storage function, the function that triggers the event will be different each time , for example:
const foo1 = () => ev => () => {
console.log('bar') }
const foo2 = () => ev => () => {
console.log('bar') }
console.log(foo1 === foo2)//false
const foo3 = (ev => () => {
console.log('bar') }) === (ev => () => {
console.log('bar') })
console.log(foo3)//false
operation result
- Therefore, when canceling an event in class object-oriented, a function must be stored in a variable/property, and the stored variable returns a function. like:
class Foo {
constructor() {
// this.ev变量会返回this.changeEv(e)
this.ev = e => {
return this.changeEv(e)
}
}
changeEv(e) {
console.log(e)
}
}
With this.ev, you can log out events in other places , for example:
class Foo {
constructor() {
// this.ev变量会返回this.changeEv(e)
this.ev = e => {
return this.changeEv(e)
}
}
addEv() {
document.addEventListener('mousemove', this.ev)
}
changeEv(e) {
console.log(e)
// 删除mousemove事件
document.removeEventListener('mousemove', this.ev)
}
}
Arrow function and common function addition and deletion event example
arrow function
class Foo {
constructor() {
/**
* 每次增加事件都会执行this.ev
* this.ev 变量会返回this.changeEv(e)函数
* 在删除事件时，直接删this.ev即可
*/
this.ev = e => {
return this.changeEv(e)
}
}
addEv() {
// 增加事件
document.addEventListener('mousemove', this.ev)
}
changeEv(e) {
console.log(e)
// 删除事件
document.removeEventListener('mousemove', this.ev)
}
}
Ordinary function
class Bar{
constructor() {
/**
* 每次增加事件都会执行this.ev
* this.ev 变量会返回this.changeEv(e)函数
* 在删除事件时，直接删this.ev即可
*/
this.ev = function (e) {
return this.changeEv(e)
}
}
addEv() {
/**
* 增加事件,重点要调用
* 是this.ev()
* 而不是this.ev
*/
document.addEventListener('mousemove', this.ev(e))
}
changeEv(e) {
console.log(e)
// 删除事件，直接删this.ev即可
document.removeEventListener('mousemove', this.ev)
}
}
array
class Me {
constructor() {
this.evArr = []
}
start() {
this.evArr.push(e => console.log('你好'))
document.addEventListener('mousemove', this.evArr[this.evArr.length - 1])
}
end() {
this.removeAllEv()
}
removeAllEv() {
// 删除所有事件
this.evArr.forEach(evItemCallback => {
document.removeEventListener('mousemove', evItemCallback)
})
}
}
2023/4/19 9:49 Series