關於事件委托 removeEventListener 不生效的問題


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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM