Cuando trabajas con eventos en JavaScript, cada clic, mouse over o mouse out devuelve un objeto event con propiedades y métodos que te permiten saber qué elemento disparó la acción y manipularlo en tiempo real. Dominar este objeto es la base para construir interfaces dinámicas con manipulación del DOM.

Qué es el objeto event y por qué importa al manejar eventos

Un evento en JavaScript no es magia: es un objeto que se genera automáticamente cuando ocurre una interacción. Ese objeto viaja como argumento dentro del callback y trae datos como el tipo de evento, las coordenadas del cursor y, sobre todo, el elemento que lo originó.

¿Qué devuelve un evento en JavaScript? Devuelve un objeto (por ejemplo, un PointerEvent) con propiedades como target, type y métodos asociados, accesibles dentro del callback del event listener.

Con esa información puedes leer el texto, el id, las clases o los estilos del elemento y modificarlos. Así, un simple clic se convierte en una puerta para manipular cualquier nodo del DOM.

Cómo imprimir el objeto event con addEventListener y un callback

Para verlo en acción, necesitas seleccionar un elemento, definir una función y conectarla con addEventListener. La idea es escuchar el clic y mostrar el evento en consola.

javascript const boton = document.querySelector('button');

const onClick = (evento) => { console.log(evento); };

boton.addEventListener('click', onClick);

Al hacer clic, la consola imprime un PointerEvent. Si lo despliegas, encuentras todas sus propiedades. Puedes nombrar el parámetro como e, evento o event: el nombre no importa, pero sí ser explícito y consistente.

Función nombrada o función anónima como callback

Ambas opciones son válidas. Una función nombrada como onClick mejora la lectura y permite reutilizarla. Una función anónima funciona cuando el código es corto y solo se usa una vez.

Cómo accedo al elemento que disparó el evento con event.target

Dentro del objeto event hay una propiedad clave: target. Representa el objetivo, es decir, el nodo del DOM sobre el que ocurrió la interacción. Desde ahí tienes acceso completo al elemento.

javascript const onClick = (evento) => { console.log(evento.target); console.log(evento.target.id); console.log(evento.target.textContent); };

Con event.target recibes el botón completo. Con event.target.id lees su identificador. Con event.target.textContent obtienes el texto interno. Es como tener el elemento en la mano y poder revisar cada uno de sus atributos.

¿Para qué sirve event.target? Sirve para identificar el elemento exacto que disparó el evento y acceder a sus propiedades del DOM, como id, innerText, classList o style, sin necesidad de volver a seleccionarlo.

Qué propiedades del elemento puedo manipular desde event.target

Una vez que tienes el target, puedes leer y modificar prácticamente cualquier atributo. Esto abre la puerta a la manipulación del DOM en respuesta a interacciones del usuario.

• innerText o textContent: para leer o cambiar el texto visible del elemento.
• id: para identificar el nodo o usarlo como referencia lógica.
• classList: para agregar, quitar o alternar clases CSS.
• style: para modificar estilos inline directamente desde JavaScript.

¿Cómo cambio el texto de un botón al hacer clic? Asigna un nuevo valor a event.target.textContent dentro del callback. Por ejemplo: event.target.textContent = 'Clic recibido'.

Este mismo patrón aplica a cualquier nodo del DOM con un event listener asociado, no solo a botones. Inputs, divs, imágenes o listas pueden escuchar eventos y exponer su propio target para que tú decidas cómo reaccionar.

¿Qué propiedad del objeto event te resulta más útil en tus proyectos? Cuéntame en los comentarios cómo la estás aplicando.