javascript removeEventListener不在类中工作

Question

我一直在玩es6类,并尝试设置一个简单的鼠标类.

addEventListener工作,但由于某种原因,我无法删除它们removeEventListener.我猜这与上下文绑定有关,但我无法弄清楚如何解决这个问题.

'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()
        }
        window.addEventListener('click', this.clicked.bind(this))
    }

    remove() {
        console.log('Removing click listener') // this line runs ..
        window.removeEventListener('click', this.clicked.bind(this))
    }
}

var mouse = new Mouser()

Answer 1

每次调用时this.clicked.bind(this),它都会返回一个新的不同的函数.因此,您传递给的函数与您传递给addEventListener()的函数不同removeEventListenter(),因此删除不会找到匹配项,也不会删除任何内容.您必须将完全相同的功能传递给两者才能使删除工作.

您必须创建一个本地存储的对您正在使用的函数的引用,以便您可以传递相同的函数进行添加和删除.有很多方法可以做到这一点,但由于这是面向对象的代码,您需要将引用存储在对象本身中,以便每个对象都有自己的引用.

这是一种方法:

'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()
    }
    // save the click handler so it can be used in multiple places
    this.clickHandler = this.clicked.bind(this);
    window.addEventListener('click', this.clickHandler)
  }

  remove () {
    console.log('Removing click listener') // this line runs ..
    window.removeEventListener('click', this.clickHandler)
  }
}

var mouse = new Mouser()