En programación, existen situaciones en las que necesitamos realizar una acción cuando ocurra un determinado caso que nos interesa. Si este caso es predecible, es decir, sabemos cuando va ocurrir, simplemente podemos utilizar un condicional if o algo similar, y listo. Pero existen ocasiones en las que desconoces cuando va a suceder.
En estas situaciones, no sabemos exactamente cuando tenemos que activar nuestra funcionalidad. Por ejemplo, no podemos predecir cuando el usuario de nuestra página hará click en un botón, o en que momento va a terminar de reproducirse una canción, si el usuario la ha pausado, etc.
En estas situaciones, cuando sucede algo, es cuando entran en juego los eventos.
¿Qué es un evento?
Un evento no es más que una «notificación» de que una característica relevante acaba de suceder.
Veamos algunos ejemplos sencillos de eventos:
- Evento
click: Se ha hecho click de ratón sobre un elemento de la página. - Evento
keydown: Pulsación de una tecla específica del teclado - Evento
play: Reproducción de un archivo de audio/video - Evento
wheel: Scroll con la rueda del ratón sobre un elemento de la página - Evento
beforeprint: El usuario ha activado la opción «Imprimir página»
Como desarrolladores, nuestro objetivo es preparar nuestro código para que cuando ocurra un determinado evento, se lleve a cabo una funcionalidad asociada. Este proceso se llama escuchar eventos. De esta forma, podemos preparar nuestra página o aplicación para que cuando ocurran ciertos eventos (que no podemos predecir de otra forma), reaccionen a ellos:
Uno de los eventos más comunes, es el evento click, que es el que se produce cuando el usuario hace click con el ratón en un elemento de la página. Vamos a utilizar este evento a modo de ejemplo en las siguientes secciones de la página, pero recuerda que hay muchos tipos de eventos diferentes.
¿Por qué utilizar eventos?
Utilizar eventos en Javascript tiene muchísimas ventajas, ya que nos permite organizar nuestro código de una forma más lógica y clara, pero una de las principales ventajas es que desacoplamos nuestro código.
Entenderemos esto más adelante, pero básicamente los eventos nos permiten evitar dependencias entre partes de nuestro código. Con los eventos simplemente escuchamos si ocurre un cierto evento, y si ocurre, ejecutamos una acción. A priori, no nos importa quién emite ese evento o donde sucede, lo importante es que ha sucedido el evento.
Formas de manejar eventos
Existen varias formas alternativas de manejar eventos en Javascript. Vamos a ver cada una de ellas por separado, con sus particularidades, pero antes hagamos un pequeño resumen:
| Forma | Ejemplo | Artículo en profundidad |
|---|---|---|
| 🟨 Mediante atributos HTML | <button onClick="..."></button> | Eventos desde atributos HTML |
| 🟥 Mediante propiedades Javascript | button.onclick = function() { ... } | Eventos desde propiedades Javascript |
✅ Mediante addEventListener() | button.addEventListener("click", ...) | Eventos desde listeners |
Cada una de estas opciones son formas equivalentes y alternativas de manejar eventos. Cada una de ellas tiene sus ventajas y sus desventajas. En los siguientes temas veremos detalladamente sus características, pero por norma general, lo aconsejable es utilizar la última, los listeners, ya que son las más potentes y flexibles.
