3

Estoy intentando eliminar un eventlistener agregado al objeto Window del navegador, pero no logro eliminarlo y se solapa varias veces en el navegador.

introducir la descripción de la imagen aquí

  window.addEventListener('message', async function(evt) {
    getDataModal(evt);
  });
async function getDataModal(evt) {
  console.log(evt);
 
  }

Y para eliminarlo simplemente llamo a la función removeEventListener:

 window.removeEventListener('message', async function(evt) {
     getDataModal(evt);
   });

¿Alguien puede indicarme cual es el problema? He revisado la documentación pero no logro eliminarlo. Gracias.

1 respuesta 1

3

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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.