handle函数要保持一致,才能移除指定的事件函数
1.正常操作
element.addEventListener(type,handler,false) element.removeEventListener(type,handler,false)
2.上下文发生变化(类中绑定上下文的方法行不通,因为bind返回的是一个新的不同的函数)
element.addEventListener(type,this.handler.bind(this),false) element.removeEventListener(type,this.handler.bind(this),false)
正确做法如下:
'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()