Esta es probablemente una pregunta sencilla; sin embargo, estoy luchando.

¿Cuál es la forma correcta de asignar y eliminar un detector de eventos, mientras se abstrae a una clase?

En el ejemplo, agregué el detector de eventos usando la función de flecha. Cuando se activa el evento, this contexto informa la instancia de test como se esperaba.

Sin embargo, no puedo eliminar el detector de eventos, lo que tendría sentido como la línea -> document.removeEventListener("mouseDown",() => this.mouseDown); está eliminando efectivamente una referencia a una nueva función.

Entonces, con eso, ¿cómo asigno el evento al oyente, mientras mantengo una referencia a la función y la instancia de clase?

 class TestClass { constructor() { this.storedValue = "In class"; document.addEventListener("mousedown", () => this.mouseDown()); } test() { console.log(this); } mouseDown() { console.log(this); document.removeEventListener("mouseDown",() => this.mouseDown); } } test = new TestClass();

Si cambio el código a:

 class TestClass { constructor() { this.storedValue = "In class"; document.addEventListener("mousedown", this.mouseDown); } test() { console.log(this); } mouseDown() { console.log(this); document.removeEventListener("mouseDown", this.mouseDown); } } test = new TestClass();

La referencia this se convierte en el document en lugar de la test .