Manipulación de Eventos en JavaScript para Interacción de Elementos

Clase 17 de 27 • Curso de JavaScript: Manipulación del DOM

Resumen

¿Qué son los eventos en JavaScript?

En el mundo del desarrollo web, los eventos son fundamentales para crear aplicaciones interactivas y responsivas. Los eventos son objetos generados por acciones del usuario, como hacer clic o pasar el cursor sobre un elemento. Estos objetos contienen propiedades y métodos que nos permiten manipular el documento de manera versátil. Dominar el uso de eventos es clave para implementar funcionalidades dinámicas y mejorar la experiencia del usuario.

¿Cómo se utilizan los eventos en JavaScript?

Para trabajar con eventos en JavaScript, necesitamos entender cómo se vinculan a los elementos del DOM (Document Object Model). Esto se logra mediante el uso de addEventListener. Para ilustrar esto, veamos un ejemplo práctico donde creamos un evento de clic para un botón.

const boton = document.querySelector('#bot');
boton.addEventListener('click', botonClick);

function botonClick(evento) {
    console.log(evento); // permite explorar el objeto del evento
}

El código anterior crea una función botonClick que se ejecuta cuando se hace clic en el botón identificado por 'bot'. La ventaja es que el evento proporciona automáticamente un objeto evento que podemos inspeccionar y utilizar para manipular el DOM.

¿Qué información proporciona un objeto de evento?

El objeto de evento es una herramienta poderosa, ya que nos brinda acceso a diversos datos del entorno donde ocurrió la acción. Algunas propiedades clave son:

target: Elemento que disparó el evento.
type: Tipo de evento ocurrido (por ejemplo, click).
timeStamp: Momento exacto en que se generó el evento.

Analicemos un fragmento del objeto de evento:

function botonClick(evento) {
    console.log(evento.target); // Elemento HTML que recibió el clic
    console.log(evento.target.id); // ID del elemento
    console.log(evento.target.textContent); // Texto dentro del elemento
}

Mediante este método, podemos acceder y manipular los atributos del elemento, como su contenido de texto o su ID.

¿Cómo manipular el DOM usando eventos?

Una vez que tenemos acceso al objeto de evento y sus propiedades, podemos modificar el DOM en respuesta a las acciones del usuario. Por ejemplo, podemos cambiar el texto de un botón después de ser clicado:

function botonClick(evento) {
    evento.target.textContent = '¡Me clicaste!';
}

Este es un ejemplo simple de manipulación del DOM, pero las posibilidades son inmensas. Podemos modificar estilos, atributos, añadir o quitar clases, e incluso crear nuevas interacciones basadas en el estado de otros elementos.

¿Por qué es importante entender los eventos?

Entender a fondo cómo funcionan los eventos nos permite crear aplicaciones más eficientes y centradas en el usuario. Al conocer las fortalezas de los eventos y cómo aprovechar sus propiedades, diseñaremos experiencias web más ricas e interactivas. En un mundo donde la interacción del usuario define el éxito de una aplicación, dominar el uso de eventos es indispensable para cualquier desarrollador web. ¡Explora, practica y sigue aprendiendo sobre este fascinante tema!

Natalia Gallego Heras

student•

Estoy viendo en la documentación de EventTarget que .addEventListener( ) acepta hasta tres parámetros (dos obligatorios como señala el profe, pero otro opcional). Una de las opciones de ese tercer parámetro es 'once', que elimina el 'listener' después haberlo usado:

addEventListener(type, listener, options)

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Kyb3r Cipher

student•

No sabia este dato, muy util gracias!

Alejandro Cáceres

student•

Comentarios como este realmente a uno lo motivan a no quedarse solamente con lo que nos enseñan en clase ya que nos ayuda a entender mejor y a estudiar más a profundidad.

Muchas gracias por tus aportes

Pablo Diaz

student•

Algunos eventos comunes en JavaScript que puedes usar con el método .addEventListener():

Eventos de ratón:
- click: Ocurre cuando se hace clic en un elemento.
- dblclick: Ocurre cuando se hace doble clic en un elemento.
- mouseover: Ocurre cuando el puntero del ratón se mueve sobre un elemento.
- mouseout: Ocurre cuando el puntero del ratón se mueve fuera de un elemento.
- mousemove: Ocurre cuando el puntero del ratón se mueve dentro de un elemento.
Eventos de teclado:
- keydown: Ocurre cuando se presiona una tecla.
- keyup: Ocurre cuando se suelta una tecla.
- keypress: Ocurre cuando se presiona una tecla y se mantiene presionada.
Eventos de formulario:
- submit: Ocurre cuando se envía un formulario.
- change: Ocurre cuando el valor de un elemento de formulario cambia.
- focus: Ocurre cuando un elemento de formulario gana el foco.
- blur: Ocurre cuando un elemento de formulario pierde el foco.
Eventos de ventana:
- load: Ocurre cuando la página se ha cargado completamente.
- resize: Ocurre cuando se cambia el tamaño de la ventana del navegador.
- scroll: Ocurre cuando se desplaza la página.
Eventos de documento:
- DOMContentLoaded: Ocurre cuando el documento HTML ha sido completamente cargado y parseado, sin esperar a que se carguen las hojas de estilo, imágenes y subframes.

Estos son solo algunos ejemplos de eventos que puedes usar. Hay muchos más eventos disponibles en JavaScript que puedes explorar según tus necesidades.

Beto Majalca

student•

Diego Andrés Rojas Pinzón

student•

Gracias, tambien tenia la duda la clase pasada referente a esto, y segun yo es que al usar el addEventListener() y pasarle un "variable" en la parte donde va la funcion esta no se le agregan los () eso indica que cuando Js llega a esa parte el mismo le coloca los parentesisi y por ende asumo yo o supongo yo que el mismo Js le manda el parametro de event a la funcion que hemos creado. te dejo lo que me respondio la IA:

Edwin Contreras

student•

Un dato interesante sobre querySelectorAll es que podemos seleccionar un contenedor específico y luego acceder a todos sus elementos secundarios. Esto nos permite crear una función que identifique el elemento exacto en el que hacemos clic, usando el objeto que nos devuelve la función.

Jesus Anguiano Solano

student•

Objeto event: Cuando se descadena un evento en el DOM, se genera un objeto de evento que contiene información sobre el evento y el elemento que lo provocó. Este objeto se pasa automáticamente al manajador de eventos como un argumento.

Yorgen Omar Marciales Parada

student•

El eventObject es un objeto que representa un evento en JavaScript, conteniendo información relevante sobre el evento que ocurrió, como el tipo de evento, el elemento que lo disparó y otros detalles. Se usa en la manipulación de eventos del DOM, permitiendo a los desarrolladores acceder a propiedades como event.target, que indica el elemento específico en el que ocurrió el evento.

Para utilizarlo, se puede agregar un listener a un elemento, como en este ejemplo:

const button = document.querySelector("#boton");
button.addEventListener("click", function(event) {
    console.log(event); // Aquí puedes explorar el eventObject
});

Este código imprime el eventObject al hacer clic en el botón, permitiendo ver todas sus propiedades y métodos.

Diego Iván Cundapí León

student•

Yo tengo de duda si un evento lo podemos guardar en una variable para utilizarlo en cualquier linea de codigo

David Fernandez Mercader

student•

Si podrias guardarlo. Pero asi de primeras solo se me ocurre que funcionaria asi:

Uso setTimeout() porque necesito primero capturar el evento al hacer click sino seria undefined.

Orlando Alonso Gonzales Paz

student•

Holi// Seleccionamos el primer botón encontrado en el documento HTMLconst button = document.querySelector("button"); // Definimos la función que se ejecutará cuando ocurra el evento 'click'// 'event' es el objeto evento (eventObject) que contiene información sobre el evento que ocurrióconst buttonClickedEvent = (event) => { // Imprimimos el objeto evento completo en la consola, contiene detalles del evento console.log(event); // Imprimimos el elemento HTML que disparó el evento (en este caso, el botón que se clickeó) console.log(event.target); // Imprimimos el 'id' del elemento que fue clickeado (si tiene un 'id') console.log(event.target.id); // Imprimimos el texto contenido dentro del botón clickeado console.log(event.target.textContent);}; // Añadimos un listener de eventos al botón, que ejecuta la función 'buttonClickedEvent'// cada vez que el botón es clickeadobutton.addEventListener("click", buttonClickedEvent);

// Seleccionamos el primer botón encontrado en el documento HTML
const button = document.querySelector("button");

// Definimos la función que se ejecutará cuando ocurra el evento 'click'
// 'event' es el objeto evento (eventObject) que contiene información sobre el evento que ocurrió
const buttonClickedEvent = (event) => {
    // Imprimimos el objeto evento completo en la consola, contiene detalles del evento
    console.log(event);
    // Imprimimos el elemento HTML que disparó el evento (en este caso, el botón que se clickeó)
    console.log(event.target);
    // Imprimimos el 'id' del elemento que fue clickeado (si tiene un 'id')
    console.log(event.target.id);
    // Imprimimos el texto contenido dentro del botón clickeado
    console.log(event.target.textContent);
};

// Añadimos un listener de eventos al botón, que ejecuta la función 'buttonClickedEvent'
// cada vez que el botón es clickeado
button.addEventListener("click", buttonClickedEvent);

Calvin Rafael Bobadilla Fernandez

student•

Llevaba mucho tiempo usando eventListener y recien me entere que se le pueden pasar 3 argumentos😅😅

Btw, excelente clase Diego!

Jose Luis Bedoya

student•

tanto tiempo usando el evento sin saber realmente su potencial! Increible claseee

Manipulación de Eventos en JavaScript para Interacción de Elementos

Entendiendo el DOM

Manipulación del DOM con JavaScript y APIs

Entendiendo el DOM y su Manipulación con JavaScript

Diferencias entre el DOM y el objeto Window en JavaScript

Seleccionando y Accesando a Elementos del DOM

Selección de Elementos del DOM con JavaScript

Navegación Jerárquica del DOM en JavaScript

Manipulando Elementos del DOM

Atributos y Propiedades en HTML y su Manipulación con JavaScript

Modificar texto en HTML con JavaScript

Modificar Estilos CSS con JavaScript: Propiedad Style y ClassName

Uso de classList para Manipular Clases en Elementos HTML

Manipulación del DOM con innerHTML e InsertAdjacentHTML

Agregar elementos HTML sin reemplazar contenido existente

Creación y Manipulación de Elementos DOM con createElement

Eliminar Elementos del DOM con JavaScript: Métodos y Ejemplos

Clonación y Reemplazo de Elementos en JavaScript

Manipulando Eventos en el DOM

Eventos y Flujo en Programación Web: Capturing y Bubbling

Manejo de Eventos en JavaScript: click, mouseOver y mouseOut