No puedes eliminar el listener implementado con una función anónima.
Piensa en esto, tenemos 2 funciones:
let funcionA = function() { return 0; }
let funcionB = function() { return 0; }
if( funcionA == funcionB){
console.log("Son iguales");
}
else{
console.log("Son distintas");
}
Como puedes observar tienes 2 funciones cuya implementación es exactamente igual, pero son distintas. Esto es porque un objeto es igual a otro si comparte el mismo espació en memoria (recuerda que una variable es una referencia a dicho espacio). Esto es lo que te está pasando a ti, que quieres eliminar el listener agregando la implementación de OTRO evento
Por otro lado, debes pensar que si esto se pudiera hacer, habría otro problema. Tú puedes agregar muchos eventos con igual implementación usando addEventListener
y si lo eliminas como tú lo estás haciendo ¿cómo debería operar? ¿Se eliminan todos? ¿el primero? .... un lio.
Lo que debes hacer es guardar la función en una variable, es decir ya no será anónima.
const unevento = () => console.log("Ejecuto evento");
function colocarEvento(){
boton.addEventListener("click",unevento);
}
function quitarEvento(){
boton.removeEventListener("click",unevento);
}
<button onclick="colocarEvento()">Agregar Evento</button>
<button onclick="quitarEvento()">Quitar Evento</button>
<button id="boton">Probar Evento</button>
Además como observarás en el ejemplo anterior, si presionas Agregar Evento
repetidas veces, solo se agregará una sola vez, porque no se puede agregar eventos repetidos
Por último, en algunoss casos solo necesitamos que el evento se ejecute una sola vez, para esto podemos usar la opción once: true
, lo que removerá el listener automáticamente luego de haber ejecutado el evento por primera vez
function colocarEvento(){
boton.addEventListener("click", ev => console.log("Ejecuto evento"), {once:true});
}
<button onclick="colocarEvento()">Agregar Evento</button>
<button id="boton">Probar Evento</button>