En los artículos anteriores hemos visto que son los eventos Javascript y como gestionarlos a través de código HTML, o a través de código Javascript, utilizando la API del DOM. Sin embargo, la forma más recomendable es hacer uso del método .addEventListener()
, el cuál es mucho más potente y versatil para la mayoría de los casos.
.addEventListener()
se pueden añadir fácilmente varias funcionalidades..removeEventListener()
se puede eliminar una funcionalidad previamente añadida..addEventListener()
se pueden indicar ciertos comportamientos especiales.Con el método .addEventListener()
permite añadir una escucha del evento indicado (primer parámetro), y en el caso de que ocurra, se ejecutará la función asociada indicada (segundo parámetro). De forma opcional, se le puede pasar un tercer parámetro
Método | Descripción |
---|---|
.addEventListener( event, func) |
Escucha el evento event , y si ocurre, ejecuta func . |
.addEventListener( event, func, options) |
Idem, pasándole ciertas opciones. |
Para verlo en acción, vamos a crear a continuación, el mismo ejemplo de apartados anteriores, de esta forma veremos como funciona y podremos comparar con los anteriores:
const button = document.querySelector("button");
button.addEventListener("click", function() {
alert("Hello!");
});
Observa algunas cosas de este ejemplo:
click
. Con .addEventListener()
no se precede con on
los nombres de eventos y se escriben en minúsculas, sin camelCase.Aunque es muy habitual escribir los eventos de esta forma, es posible que veas mucho más organizado este código si sacamos la función y la guardamos en una constante previamente, para luego hacer referencia a ella desde el .addEventListener()
:
const button = document.querySelector("button");
function action() {
alert("Hello!");
};
button.addEventListener("click", action);
Si prefieres utilizar las funciones flecha de Javascript, quedaría incluso más legible:
const button = document.querySelector("button");
const action = () => alert("Hello!");
button.addEventListener("click", action);
Sin embargo, una de las características más cómodas de utilizar .addEventListener()
es que puedes añadir múltiples listeners de una forma muy sencilla.
Dicho método .addEventListener()
permite asociar múltiples funciones a un mismo evento, algo que, aunque no es imposible, es menos sencillo e intuitivo en las modalidades de gestionar eventos que vimos anteriormente:
<button>Saludar</button>
<style>
.red { background: red }
</style>
<script>
const button = document.querySelector("button");
const action = () => alert("Hello!");
const toggle = () => button.classList.toggle("red");
button.addEventListener("click", action); // Hello message
button.addEventListener("click", toggle); // Add/remove red CSS
</script>
Observa que en este ejemplo, hemos añadido una clase .red
de CSS, que coloca el color de fondo del botón en rojo. Además, hemos creado dos funcionalidades:
action
, que muestra un mensaje de saludotoggle
, que añade o quita el color rojo del botónObserva que al pulsar el botón se efectuan ambas acciones, ya que hay dos listeners en escucha.
Al utilizar el método .addEventListener()
, se puede indicar un tercer parámetro opcional. Se trata de un
Opción | Descripción |
---|---|
capture |
El evento se dispara al inicio (capture), en lugar de al final (bubble). |
once |
Sólo ejecuta la función la primera vez. Luego, elimina listener. |
passive |
La función nunca llama a .preventDefault() (mejora rendimiento). |
Repasemos cada una de estas opciones:
En primer lugar, la opción capture
nos permite modificar la modalidad en la que escuchará el evento (capture/bubbles, ver más adelante). Esto, básicamente, lo que hace es modificar en que momento se procesa el evento.
En segundo lugar, la opción once
nos permite indicar que el evento se procesará solo la primera vez que se dispare un evento. Internamente, lo que hace es ejecutarse una primera vez y luego llamar al .removeEventListener()
, eliminando el listener una vez ha sido ejecutado.
En tercer y último lugar, la opción passive
nos permite crear un evento pasivo en el que indicamos que nunca llamaremos al método .preventDefault()
para alterar el funcionamiento del evento. Esto puede ser muy interesante en temas de rendimiento (por ejemplo, al hacer scroll en una página), ya que los eventos pasivos son mucho menos costosos.
El ejemplo anterior, se puede completar haciendo uso del método .removeEventListener()
, que sirve como su propio nombre indica para eliminar un listener que se ha añadido previamente al elemento. Para ello es muy importante indicar la misma función que añadimos con el .addEventListener()
y no una función diferente que haga lo mismo que la primera.
Método | Descripción |
---|---|
.removeEventListener( event, func) |
Elimina la funcionalidad func asociada al evento event . |
Veamos el ejemplo anterior, eliminando la funcionalidad action
mediante .removeEventListener()
, es decir, sólo debería actuar la funcionalidad toggle
:
<button>Saludar</button>
<style>
.red { background: red }
</style>
<script>
const button = document.querySelector("button");
const action = () => alert("Hello!");
const toggle = () => button.classList.toggle("red");
button.addEventListener("click", action); // Add listener
button.addEventListener("click", toggle); // Toggle red CSS
button.removeEventListener("click", action); // Delete listener
</script>
Ten en cuenta que es posible eliminar el listener del evento porque hemos guardado en una constante la función, y tanto en
.addEventListener()
como en.removeEventListener()
estamos haciendo referencia a la misma función. Si en lugar de esto, añadieramos la función literalmente, aunque hagan lo mismo, serían funciones diferentes y no realizaría lo que esperamos.
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev