El objeto evento o eventObject

Curso de JavaScript: Manipulación del DOM

Entendiendo el DOM

Manipulación del DOM con JavaScript para Páginas Dinámicas

Manipulación del DOM con JavaScript: Selección y Modificación de Elementos

Diferencias entre DOM y objeto Window en JavaScript

Seleccionando y Accesando a Elementos del DOM

Selección de Elementos del DOM con JavaScript

Métodos de navegación jerárquica en el DOM: padres e hijos

Manipulando Elementos del DOM

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

JavaScript: Modificación Dinámica de Texto en HTML

Modificar estilos CSS con JavaScript

Manipulación de Clases con classList en JavaScript

Manipulación del DOM: Crear y Eliminar Elementos con JavaScript

Añadir Elementos de Forma Eficiente con insertAdjacentHTML

Crear nodos DOM: Uso de createElement en JavaScript

Eliminar Elementos del DOM: Métodos Remove y RemoveChild

Clonación y Reemplazo de Elementos con JavaScript

Manipulando Eventos en el DOM

Eventos JavaScript: Capturing y Bubbling en el DOM

Eventos en JavaScript: cómo añadir y quitar listeners en HTML

Eventos en JavaScript: Accediendo y Manipulando el DOM

Validación de Formularios con JavaScript: Evita Comportamientos por Defecto

Delegation Pattern en JavaScript: Optimización de Eventos Click

Creando un Administrador de Tareas

Construyendo un Task Manager con Persistencia usando Local Storage

Delegación de Eventos para Botones Borrar y Editar en JavaScript

Persistencia en Local Storage: Guardar y Recuperar Tareas

Edición y Sincronización de Tareas en Local Storage

JSON y Local Storage en Aplicaciones Web

Persistencia de Tema en JavaScript: Cambiar entre Light y Dark

Manipulación de DOM con JavaScript para Páginas Dinámicas

Asincronía en JavaScript

Programación Síncrona y Asíncrona en JavaScript: Call Stack y Web APIs

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

¿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!

Aportes 10

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Natalia Gallego Heras

hace 9 meses

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>

Edwin Contreras

hace 5 meses

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. ![](https://static.platzi.com/media/user_upload/carbon%20%281%29-d60cae0f-a441-41fd-8327-6cf21162e314.jpg)![](https://static.platzi.com/media/user_upload/carbon-bd244cca-3c4b-413a-b115-888e505f0c52.jpg)

Pablo Diaz

hace 3 meses

Algunos eventos comunes en JavaScript que puedes usar con el método `.addEventListener()`: 1. **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. 2. **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. 3. **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. 4. **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. 5. **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

hace 9 meses

![](https://static.platzi.com/media/user_upload/aporte-000743ff-9c29-4269-9afc-b9f3b1c0b16b.jpg)![](https://static.platzi.com/media/user_upload/aporte-8f085674-6239-4a0b-a139-305e8822423e.jpg)![]()

Jesus Anguiano Solano

hace 7 meses

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.

Omar89

hace 5 meses

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: ```javascript 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

hace 8 meses

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

Orlando Alonso Gonzales Paz

hace 6 meses

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); ```js // 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

hace 7 meses

Llevaba mucho tiempo usando eventListener y recien me entere que se le pueden pasar 3 argumentos😅😅 Btw, excelente clase Diego!

Jose Luis Bedoya

hace 8 meses

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