Javascript removeEventListener 不在类中工作

Question

这个问题已经有答案了:

Removing event listener which was added with bind (10 个回答)

已关闭 5 个月前。

我一直在研究 es6 类，并尝试设置一个简单的鼠标类。

addEventListener有效，但由于某种原因我无法使用 removeEventListener 删除它们。我猜这与上下文绑定(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()
        }
        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()