Cada vez que se hace clic en un botón, se pasa el cursor sobre un elemento o se dispara cualquier acción en el navegador, JavaScript genera un objeto de evento. Comprender qué contiene ese objeto y cómo aprovecharlo es la base para manipular el DOM de forma dinámica y precisa.
¿Qué es el objeto del evento y por qué importa?
Los eventos no son magia: son objetos de JavaScript con propiedades y métodos que describen exactamente qué ocurrió y dónde ocurrió. Cuando se registra un listener, la función callback recibe automáticamente ese objeto como parámetro. Con esa información se puede saber:
- A qué elemento se le dio clic.
- Qué tipo de evento se disparó.
- Qué atributos, clases o estilos tiene el elemento involucrado.
Para observarlo en acción, primero se selecciona el elemento y luego se crea la función que recibirá el evento [0:54]:
javascript
const boton = document.querySelector('#button');
const buttonClick = function (evento) {
console.log(evento);
};
boton.addEventListener('click', buttonClick);
Al dar clic, la consola imprime un objeto llamado PointerEvent [2:05]. Ese objeto contiene toda la información asociada al clic: coordenadas, tipo de evento, el elemento que lo originó y mucho más.
¿Cómo se usa el parámetro del evento dentro del callback?
El nombre del parámetro puede ser cualquiera —e, event, evento—, pero lo importante es ser explícito para que el código sea legible. Esa variable es la referencia directa al objeto que el navegador construye cada vez que el evento se dispara [2:24].
También es posible escribir una función anónima directamente como callback dentro de addEventListener, y el resultado sería idéntico. Sin embargo, separar la función facilita la lectura y el mantenimiento.
¿Qué es el target y cómo acceder a sus propiedades?
Dentro del objeto del evento existe una propiedad fundamental: target. El target representa el elemento del DOM que originó el evento [2:46]. Al inspeccionar evento.target se obtiene el nodo HTML completo, con todos sus atributos.
javascript
const buttonClick = function (evento) {
console.log(evento.target); // <button id="button">...</button>
console.log(evento.target.id); // "button"
console.log(evento.target.textContent); // texto visible del botón
};
Cada console.log devuelve información diferente [3:30]:
evento.target → el elemento HTML completo.evento.target.id → el valor del atributo id.evento.target.textContent → el texto contenido dentro de la etiqueta.
¿Qué más se puede leer y modificar desde el target?
Al tener acceso al nodo del DOM a través del target, se pueden consultar y modificar prácticamente todas sus características [3:58]:
- Texto interno:
innerText o textContent permiten leer y reescribir el contenido visible.
- Clases CSS: se accede mediante
classList para agregar, eliminar o alternar clases.
- Estilos en línea: con
style se ajustan propiedades visuales directamente.
- Atributos HTML:
id, name, data-* y cualquier otro atributo están disponibles.
Esto significa que, al momento de dispararse el evento, no solo se obtiene información del elemento, sino que se puede manipularlo en tiempo real: cambiar su texto, modificar su apariencia o actualizar sus atributos sin necesidad de volver a seleccionarlo con querySelector.
¿Cómo aplicar esta lógica a otros elementos del DOM?
El mismo principio funciona con cualquier nodo: párrafos, imágenes, inputs o contenedores. Si un elemento tiene un event listener registrado, al dispararse el evento se recibe su objeto, se accede al target y se trabaja con sus propiedades. La combinación de addEventListener, el objeto del evento y la propiedad target forma el patrón básico para toda manipulación interactiva en JavaScript.
Comparte en los comentarios qué propiedades del objeto del evento te han resultado más útiles en tus proyectos.
