Damián De Luca - Capacitación & Desarrollo Web

El modelo de eventos de JavaScript

Damián De Luca
JavaScript

El modelo de eventos en JavaScript es un mecanismo fundamental para la interacción del usuario con la interfaz. Desde un simple clic hasta eventos más complejos como el desplazamiento de la página o el envío de formularios, los eventos nos permiten definir un comportamiento específico que desencadena una acción en respuesta a un estímulo del usuario o del sistema. En este sentido debemos tener en cuenta que existe diversidad de eventos, incluyendo los que tienen que ver con contenido multimedia, impresión, carga de la página, sucesos en la ventana del navegador.

Con la evolución de JavaScript a través de las versiones de ECMAScript, este modelo ha mejorado y se ha enriquecido con nuevas características. Por ejemplo, es posible detectar si se tiene conexión a Internet o no (online / offline)

En este artículo, vamos a profundizar en cómo funciona el modelo de eventos en JavaScript, explorando los conceptos detrás de los eventos y proporcionando ejemplos prácticos que se ajustan a las versiones más recientes de ECMAScript.

¿Qué es un evento en JavaScript?

Un evento en JavaScript es una señal que indica que algo ha sucedido, ya sea un clic del usuario, la pulsación de una tecla, el movimiento del ratón o el cambio de estado de algún elemento en la página web. Cada evento tiene un nombre, como click, keydown o submit, y se puede interceptar para ejecutar código JavaScript cuando ese evento ocurre.

Tipos de eventos comunes

Algunos de los eventos más comunes incluyen:

El modelo de eventos

El modelo de eventos en JavaScript se compone de tres fases: captura, objetivo y propagación. A través de estas fases, podemos controlar cómo y cuándo se gestionan los eventos en una jerarquía de elementos del DOM.

  1. Captura: el evento se propaga desde la raíz del documento hasta el elemento objetivo.
  2. Objetivo: en este momento el evento llega al elemento objetivo.
  3. Propagación: el evento se propaga de vuelta desde el elemento objetivo hasta la raíz.

Este comportamiento se conoce como propagación de eventos o event bubbling. Por defecto, JavaScript sigue un modelo de burbujeo, donde el evento se propaga hacia arriba en el DOM.

Sintaxis: addEventListener

Para manejar eventos en JavaScript moderno (ECMAScript 6 en adelante), podemos emplear el método addEventListener. Este método nos permite agregar un manejador de eventos a cualquier elemento del DOM y tiene la siguiente estructura:

elemento.addEventListener(evento, manejador, usoCaptura);

Ejemplo práctico: manejo de un evento de click

A continuación, veamos cómo capturar un evento de clic en un botón y ejecutar una acción:

<button id="miBoton">Haz clic aquí</button>

<script>
  const boton = document.getElementById('miBoton');

  boton.addEventListener('click', () => {
    alert('¡Hola!');
  });
</script>

Cuando el usuario haga clic en el botón, se disparará un alert que mostrará el mensaje ¡Hola!.

Cómo prevenir la propagación de eventos

A veces, queremos evitar que un evento siga propagándose hacia arriba en el DOM. Para ello, usamos el método stopPropagation():

<div id="contenedor">
  <button id="miBoton">Haz clic aquí</button>
</div>

<script>
  const contenedor = document.getElementById('contenedor');
  const boton = document.getElementById('miBoton');

  contenedor.addEventListener('click', () => {
    console.log('Clic en el contenedor');
  });

  boton.addEventListener('click', (event) => {
    event.stopPropagation();
    console.log('Clic en el botón');
  });
</script>

Aquí, cuando el usuario haga clic en el botón, el evento de clic no se propagará hacia el contenedor, gracias a event.stopPropagation().

Cómo prevenir el comportamiento por defecto

A veces, un evento desencadena una acción predeterminada del navegador, como el envío de un formulario o la navegación a un enlace. Para evitar este comportamiento, podemos usar event.preventDefault().

Ejemplo práctico con un formulario:

<form id="miFormulario">
  <input type="text" id="nombre" />
  <button type="submit">Enviar</button>
</form>

<script>
  const formulario = document.getElementById('miFormulario');

  formulario.addEventListener('submit', (event) => {
    event.preventDefault(); // Evita que el formulario se envíe
    console.log('Formulario no enviado');
  });
</script>

Aquí, el evento submit se intercepta y se evita el comportamiento predeterminado de enviar el formulario.

Eventos personalizados

JavaScript moderno nos permite crear eventos personalizados utilizando el constructor CustomEvent. Esto es útil cuando queremos definir eventos propios que no están relacionados con los eventos del DOM.

const eventoPersonalizado = new CustomEvent('miEvento', {
  detail: { mensaje: 'Este es un evento personalizado' }
});

document.addEventListener('miEvento', (event) => {
  console.log(event.detail.mensaje);
});

// Disparar el evento personalizado
document.dispatchEvent(eventoPersonalizado);

En este caso, hemos creado un evento llamado miEvento que contiene datos adicionales en su propiedad detail.

Casos prácticos

Imaginemos que queremos manejar clics en varios botones dentro de un contenedor. En lugar de agregar un manejador de eventos a cada botón, podemos aprovechar la delegación de eventos:

<div id="contenedorBotones">
  <button class="boton">Botón 1</button>
  <button class="boton">Botón 2</button>
  <button class="boton">Botón 3</button>
</div>

<script>
  const contenedor = document.getElementById('contenedorBotones');

  contenedor.addEventListener('click', (event) => {
    if (event.target.classList.contains('boton')) {
      console.log(`Has clicado en ${event.target.textContent}`);
    }
  });
</script>

Un caso común es detectar cuando el usuario pulsa una tecla específica:

document.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    console.log('Se pulsó Enter');
  }
});

En conclusión

El modelo de eventos en JavaScript es uno de los pilares fundamentales para interactuar con los usuarios y manejar eventos que ocurren con la página. Con las versiones más recientes de ECMAScript, tenemos herramientas modernas y eficientes como addEventListener, CustomEvent, y funciones como stopPropagation y preventDefault para gestionar el comportamiento de los eventos de manera controlada y precisa.

¿Te gustaría aprender más sobre eventos específicos o ver otros ejemplos avanzados? Dejame un comentario o escibime un mensaje.

Salir de la versión móvil