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