Capturar un evento solo una vez

Problema:

A veces queremos que el evento solo se produzca una vez

Si programamos un evento en la página web, este se disparará cada vez que ocurra.

Pero a veces puede ser necesario que ese evento no se produzca más de una vez.

Por ejemplo si quiero cargar una imagen al pulsar un botón, una vez cargda este botón ya debe dejar de actuar.

Solución

Usar la opción once del métodos addEventListener

El método addEventListener se usa habitualmente con dos argumentos: el nombre del evento y el gestor con la función que se ejecuta cuando se dispara.

Pero existe un tercer argumento opcinal consitente en un objeto con opciones. Una de estas opcines es once, si se pone a true el evento solo se atiende una vez.

Ejemplo

En este ejemplo el evento lanzará una ventana alert la primera vez ue se pulsa el botón, pero después dejará de funcionar.

<button id="aviso">Pulsa para abrir el alert</button>

<script>

let boton = document.getElementById('aviso');

boton.addEventListener('click', avisar, {once:true})

function avisar(){

alert("Es la única vez que aparezco");

}

</script>

scripts