Qué son los eventos en el DOM en JavaScript

Un evento en JavaScript es una acción o suceso especifico al que es posible queramos detectar y actuar cuando ocurra.

Los eventos son algo propio de JavaScript, del lenguaje en si. Ya hemos visto que podemos usarlo tanto en el navegador, como en runtime (como NodeJS).

Sin embargo, los eventos son usados con mayor frecuencia en el navegador. Esto es así porque nos permiten para reaccionar a eventos que ocurren habitualmente en el frontend.

Algunos ejemplos son las acciones del usuario (cómo hacer click en un botón, o escribir en un input), o del propio navegador (como finalizar la carga de una página).

Así que vamos a dedicar una sección a hablar de los eventos, pero específicamente eventos en el navegador. Vamos a por ello 👇.

Tipos comunes de eventos

El navegador pone a nuestra disposición un montón de eventos, de distintos tipos de eventos. Algunos de ellos son,

Manejadores de eventos

Para interactuar con los eventos necesitamos manejadores de eventos, que son funciones que definimos se ejecutaran en respuesta a estos sucesos.

Para asociar una función con un evento usamos el método addEventListener. La sintaxis básica es:

elemento.addEventListener(evento, manejador, [opciones]);

Propiedades del evento

Los objetos de eventos en JavaScript proporcionan información sobre el evento que ocurrió. Estos objetos se pasan automáticamente a los manejadores de eventos y tienen propiedades útiles. Alguna de ellas son:

boton.addEventListener('click', (evento) => {
  console.log(evento.type);         // 'click'
  console.log(evento.target);       // El botón clickeado
  evento.preventDefault();          // Previene la acción por defecto (si aplica)
});

Métodos del evento

Los objetos de eventos también proporcionan métodos útiles que permiten controlar cómo se comporta el evento. Algunos de ellos son:

boton.addEventListener('click', (evento) => {
  evento.preventDefault();          // Previene la acción por defecto (si aplica)
  evento.stopPropagation();         // Detiene la propagación del evento
});

Propagación de eventos

La propagación de eventos se refiere al proceso mediante el cual un evento se mueve a través del árbol de elementos del DOM, desde el origen del evento hasta el objetivo final. Este proceso puede seguir dos fases principales:

1. Fase capturing: El evento comienza en el documento raíz y viaja hacia el objetivo del evento.
2. Fase bubbling: El evento viaja desde el objetivo del evento hacia el documento raíz.