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, como hemos visto, 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.
- Con
.addEventListener()se pueden añadir fácilmente múltiples funcionalidades. - Con
.removeEventListener()se puede eliminar una funcionalidad previamente añadida. - Con
.addEventListener()se pueden indicar ciertos comportamientos especiales.
El método .addEventListener()
El método .addEventListener() nos permite empezar a escuchar un evento concreto, y en el caso de que ocurra, ejecutar la función asociada. 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, donde escucharemos un evento de tipo click para que se ejecute una función cuando ocurra:
- 1️⃣ Buscamos el elemento que tendrá el evento, en este caso
<button> - 2️⃣ Creamos una función
action()que realizará la acción deseada. - 3️⃣ En el botón, escuchamos el evento
clicky le asociamos la funciónaction.
<button>Click me</button>
<script>
const button = document.querySelector("button");
function action() {
alert("Hello!");
};
button.addEventListener("click", action);
</script>
Ten muy en cuenta los siguientes detalles:
- ✨ En el primer parámetro indicamos el nombre del evento, en nuestro ejemplo,
click. - ✨ Con
.addEventListener()no se precede conony se escriben en minúsculas, sin camelCase. - ✨ En el segundo parámetro indicamos la función a ejecutar al ocurrir el evento.
Arrow functions en .addEventListener()
Si estás empezando en Javascript, es posible que el código anterior lo veas más claro que el siguiente código que vamos a ver. Sin embargo, es muy habitual escribir los eventos de esta otra forma:
const button = document.querySelector("button");
button.addEventListener("click", function() {
alert("Hello!");
});
En lugar de tener la función definida fuera, la utilizamos en el propio .addEventListener() y nos ahorramos ponerle un nombre, es decir, utilizamos una función anónima. Si prefieres utilizar las funciones flecha de Javascript, quedaría incluso más legible:
const button = document.querySelector("button");
button.addEventListener("click", () => {
alert("Hello!");
});
De hecho, cuando tenemos un código muy corto, podemos incluso ahorrarnos las llaves en las arrow function y escribirlo todo en una sola línea.
Múltiples listeners
El 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.
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:
- 1️⃣
action, que muestra un mensaje de saludo - 2️⃣
toggle, que añade o quita el color rojo del botón
<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>
Al pulsar el botón se efectuan ambas acciones (ya que hay dos listeners en escucha). Primero veremos el mensaje de alerta, y luego, el color rojo se añade o se quita.
Opciones de .addEventListener()
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). Ver más adelante. |
once | Sólo ejecuta la función una primera vez. Luego, elimina el listener. |
passive | La función nunca llama a .preventDefault(), mejorando así el rendimiento. |
signal | Asocia una señal al listener para poder cancelarlo. Ver tema de AbortController. |
Repasemos cada una de estas opciones:
La opción
capturenos permite modificar la modalidad en la que se escuchará el evento (capture/bubbles). Básicamente, lo que hace es modificar en que momento se analiza el evento. Profundizaremos en esto un poco más adelante, en el tema de propagación de eventos.La opción
oncenos permite indicar que el evento se procesará solo la primera vez que se dispare el evento. Internamente, lo que hace es ejecutarse una primera vez y luego llamar al.removeEventListener(), eliminando el listener una vez ha sido ejecutado.La opción
passivenos 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.La opción
signalnos permite asociar al listener una señal que podemos utilizar posteriormente para cancelar eventos en grupo de forma eficiente. Lo veremos más adelante en el artículo sobre AbortController.
