El manejo de eventos es una parte fundamental de la interactividad en las aplicaciones web. Los eventos permiten que los usuarios interactúen con la página web de varias maneras, como clics, teclas presionadas, movimientos del ratón, entre otros. En este capítulo, aprenderemos cómo escuchar y responder a los eventos en el DOM utilizando JavaScript.

¿Qué es un Evento?

Un evento es cualquier cosa que pasa en el navegador que se puede detectar por JavaScript. Esto incluye acciones del usuario, como clics y tecleos, y también eventos del navegador, como la carga de una página.

Escucha de Eventos

Para manejar eventos, primero debemos escuchar esos eventos en elementos del DOM. Hay varias formas de añadir estos "escuchadores de eventos":

addEventListener

El método addEventListener permite añadir un manejador de eventos a un elemento. Este es el método más recomendado ya que ofrece mayor flexibilidad.

javascript

Asignación Directa

Otra forma de añadir un manejador de eventos es asignando una función directamente a la propiedad de evento del elemento.

javascript

Remoción de Manejadores de Eventos

Para quitar un manejador de eventos, usamos removeEventListener.

javascript

Ejemplos de Eventos Comunes

A continuación, algunos ejemplos de eventos comunes y cómo manejarlos:

Evento de Clic

javascript

Evento de Tecla Presionada

javascript

Evento de Movimiento del Ratón

javascript

Eventos del Formulario

Los eventos del formulario son cruciales para validar y procesar la entrada del usuario.

Evento de Envío del Formulario

javascript

Delegación de Eventos

La delegación de eventos es una técnica en la que se utiliza un solo escuchador de eventos para manejar eventos en múltiples elementos hijos. Esto es especialmente útil para manejar eventos en elementos dinámicamente creados.

Ejemplo de Delegación de Eventos

javascript

Ejemplo Completo

El siguiente ejemplo cubre varios eventos comunes y cómo manejarlos:

html

Conclusión

El manejo de eventos en el DOM nos permite crear aplicaciones web interactivas y responsivas. Al comprender cómo escuchar y manipular eventos, podemos mejorar la experiencia del usuario y crear aplicaciones más dinámicas. En el siguiente capítulo, exploraremos la delegación de eventos para una gestión aún más eficiente de los eventos en el DOM.