removeEventListenerz不生效的问题

原创于 2018-12-12 14:26:19 发布 · 680 阅读

2 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了JavaScript中如何正确地添加和移除事件监听器，特别是在类中使用bind方法时的常见陷阱。通过实例展示了如何保存点击处理程序，以便在多个地方使用，并确保能够正确移除事件监听器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、

element.addEventListener(type,handler,false)
element.removeEventListener(type,handler,false)

handle函数要保持一致，才能移除指定的事件函数

2、

element.addEventListener(type,this.handler.bind(this),false)
element.removeEventListener(type,this.handler.bind(this),false)

类中绑定上下文的方法行不通，因为bind返回的是一个新的不同的函数

正确方式可以为：

'use strict'
 class Mouser {
 constructor （）{
 this.counter = 0 
 this.clicked = function（event）{
 this.counter ++ 
 console.log（'clicks：'，this.counter ）
 if（this.counter> = 10）this.remove（）
} 
 //保存点击处理程序，以便可以在多个地方使用
 this.clickHandler = this.clicked.bind（this）; 
 window.addEventListener（'click'，this.clickHandler）
} 
 
 remove（）{
 console.log（'Removing click listener'）// this 
 window.removeEventListener（'click'，this.clickHandler）
} 
} 
 
 var mouse = new Mouser（）