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()