name - javascript removeEventListener no funciona dentro de una clase

javascript find by class name

Question

He estado jugando con las clases de es6 y he intentado configurar una clase de mouse simple.

addEventListener funciona, pero por alguna razón no puedo eliminarlos con removeEventListener . Supongo que esto tiene algo que ver con el enlace de contexto, pero no puedo resolver cómo solucionarlo.

''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

Cada vez que llamas this.clicked.bind(this) , devuelve una función nueva y diferente. Por lo tanto, la función que está pasando a addEventListener() no es lo mismo que la función que está removeEventListenter() a removeEventListenter() por lo que la eliminación no encuentra una coincidencia y no elimina nada. Debe pasar exactamente la misma función a ambos para que el remove funcione.

Tendrá que crear una referencia almacenada localmente a la función que está utilizando para que pueda pasar la misma para agregar y eliminar. Hay varias formas de hacerlo, pero dado que este es un código orientado a objetos, querrá almacenar la referencia en el objeto mismo para que cada objeto pueda tener su propia referencia.

Aquí hay una manera de hacerlo:

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