Javascript removeEventListener 在 class 中不工作

Question

我一直在玩 es6 classes，并尝试设置一个简单的鼠标 class。

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)，它都会 returns 一个新的和不同的函数。因此，您传递给 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()

Javascript removeEventListener 在 class 中不工作

Javascript removeEventListener not working inside a class

javascript

class

dom-events