DOM Events es lo que hace que una página web sea interactiva. El uso de eventos DOM es lo que hace que una página haga clic o se envíe un formulario, y permite a los desarrolladores crear una experiencia de usuario atractiva.

Algunos ejemplos de eventos DOM son cuando un usuario hace clic con el mouse, cuando se carga una página web, cuando se carga una imagen, cuando se envía un formulario HTML y cuando un usuario presiona una tecla.

En este artículo simplificaremos conceptos clave en eventos DOM y exploraremos cómo manejarlos.

1. agregarEventListener

addEventListener, adjunta un controlador de eventos a los elementos, le permite definir cómo reacciona el elemento a la interacción del usuario con la página.

Ejemplo: El siguiente código agrega un evento de "clic" para mostrar los detalles del cóctel cuando se hace clic en la imagen.

`img.addEventListener('click', () => handleClick(cocktail));`

2. selector de consulta

querySelector, te permite seleccionar un elemento usando selectores tipo CSS. Es una de las formas más versátiles de apuntar a elementos.

Ejemplo: Este código crea una sección plegable en la página web. document.querySelectorAll selecciona todos los elementos h3 en la página web y devuelve una NodeList de todos los elementos coincidentes.

const setupCollapsibles = () => {
  const collapsibles = document.querySelectorAll('.collapsible h3');

3. getElementById y getElementsByClassName

getElementById apunta a un solo elemento por su identificación única.

De manera similar, getElementsByClassName selecciona todos los elementos con una clase específica y los devuelve como una colección.

Ejemplo: A continuación, getElementById busca un elemento por su atributo id en el documento HTML.

Se utiliza aquí para acceder a las entradas del formulario específico, nuevo nombre, nuevos ingredientes, nueva imagen, nueva receta y recupera sus valores.

Estos valores luego se almacenan en las propiedades del objeto newCocktail que se define con const.

De esta manera, cuando el usuario envía un formulario para crear un nuevo cóctel, este se almacena de forma estructurada dentro del objeto newCocktail.

const newCocktail = {
      name: document.getElementById('new-name').value,
      ingredients: document.getElementById('new-ingredients').value.split(', '),
      image: document.getElementById('new-image').value,
      recipe: document.getElementById('new-recipe').value,
    }; 

4. Contenido DOM cargado

El evento DOMContentLoaded garantiza que JavaScript se ejecute solo después de que el DOM esté completamente cargado, lo que evita que los errores intenten acceder a los elementos antes de que estén disponibles.

Ejemplo: DOMContentLoaded, es un evento que se activa cuando el documento HTML inicial se ha cargado y analizado por completo, sin esperar a que las hojas de estilo, imágenes u otros recursos externos se carguen por completo.

Garantiza que el DOM esté completamente construido y sea accesible, para que puedas interactuar de forma segura con elementos en el HTML, como agregar detectores de eventos o manipular el DOM.

En el código siguiente, el navegador le indica que el documento ya está disponible y que el usuario puede comenzar a interactuar con él.

document.addEventListener('DOMContentLoaded', () => {
  setupEditListener();
  setupDeleteListener();
});

Notas finales

Los eventos DOM son fundamentales para hacer que una página web sea interactiva y atractiva para los usuarios. Al comprender y utilizar métodos básicos como addEventListener, querySelector, getElementById y getElementsByClassName, puede crear interfaces de usuario dinámicas que respondan a clics, envíos de formularios y más.

Además, el evento DOMContentLoaded garantiza que sus scripts se ejecuten solo después de que el DOM esté completamente cargado, lo que evita posibles errores y garantiza una interacción fluida del usuario.

En resumen, los eventos DOM te permiten:

• Adjunte controladores de eventos con addEventListener para una interactividad responsiva.

• Seleccione elementos con querySelector o getElementById para actualizar el contenido dinámicamente.

• Administrar acciones activadas por eventos basadas en la entrada del usuario, como envíos de formularios.

• Asegúrate de que tus scripts se ejecuten en el momento adecuado usando DOMContentLoaded.

Con estas técnicas, puedes transformar páginas web estáticas en experiencias interactivas que mejoren la participación del usuario.