エラー削除イベント
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))//错误三
}
}
エラー 1、エラー 2 のレンダリング
エラー 3 レンダリング
イベントを正しく削除する 2 つの方法
- 変数または配列を使用して、実行する関数を格納します。この変数または配列要素は関数を返します。
方法 1 アロー関数: this を変更せずに親を指します。
方法2 通常の関数：関数を一度実行し、その後関数を返して削除イベントを実現する
コードデモ
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)
}
}
結論は
- イベントが追加されるたびに、 Brand newを中心に、まったく新しい関数が作成されます。
- 変数ストレージ関数を使用しない場合、イベントをトリガーする関数は毎回異なります。次に例を示します。
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
演算結果
- したがって、オブジェクト指向クラスでイベントをキャンセルする場合、関数を変数/プロパティに格納する必要があり、格納された変数は関数を返します。好き：
class Foo {
constructor() {
// this.ev变量会返回this.changeEv(e)
this.ev = e => {
return this.changeEv(e)
}
}
changeEv(e) {
console.log(e)
}
}
this.ev を使用すると、次のような他の場所のイベントをログアウトできます。
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)
}
}
アロー機能と共通機能の追加・削除イベント例
アロー関数
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)
}
}
通常の関数
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)
}
}
配列
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 シリーズ