¿Qué es el objeto event en JavaScript? Ejemplos.

El objeto event es la información que el navegador genera automáticamente cada vez que el usuario interactúa con la página. Este objeto describe qué ocurrió, dónde ocurrió y sobre qué elemento, permitiéndote controlar y responder a acciones como clics, teclas presionadas o cambios en formularios. Entender el objeto event es clave para manejar el DOM de forma profesional y crear experiencias interactivas precisas.

1. ¿Qué es el objeto event en JavaScript?

Cuando ocurre un evento, el navegador crea automáticamente un objeto especial llamado objeto de evento (event object).
Este objeto contiene toda la información detallada acerca de ese suceso específico.

Para entender mejor esta definición, debemos antes conocer algunos conceptos:

Ahora que sabemos que es el objeto event (información detallada acerca de ese suceso específico).

🎯Debemos saber que el objeto de evento NO es siempre el mismo — cambia según el tipo de evento. Por ejemplo:

• Si es un evento de mouse → tendrás un MouseEvent.
• Si es un evento de teclado → un KeyboardEvent.
• Si es un input → un InputEvent.
• Si es un evento personalizado → un CustomEvent.

Esto permite que tu código reciba datos precisos y relevantes dependiendo del tipo de interacción.

1.1. ¿Qué contiene exactamente el objeto event?

El objeto de evento puede incluir:

1. Datos sobre el suceso
   • event.type: tipo de evento, como "click" o "keydown".
   • event.timeStamp: momento exacto en que ocurrió.
2. Datos sobre el elemento afectado
   • event.target: elemento donde ocurrió el evento (puede ser un hijo).
   • event.currentTarget: elemento donde está el listener.
3. Datos adicionales según el tipo de evento
   • MouseEvent: posición del cursor (clientX, clientY), botón pulsado, etc.
   • KeyboardEvent: tecla presionada (key, code), si había Shift/Ctrl/etc.
   • InputEvent: texto ingresado, tipo de cambio.
   • TouchEvent: posiciones de dedos en pantalla.
   • CustomEvent: datos personalizados en detail.
4. Métodos para controlar el evento
   • preventDefault() → evita la acción por defecto (Ej: no enviar un form).
   • stopPropagation() → evita que el evento siga subiendo por el DOM.
   • stopImmediatePropagation() → detiene otros handlers en el mismo nodo.

1.2. ¿Dónde puedo ver la información del objeto event?

La información del objeto event solo se puede ver si vos la mostrás en la consola.
El navegador NO la muestra automáticamente.

A continuación te muestro paso a paso cómo ver el objeto event en la consola usando console.log(event)

PASO 1:

Agregás un listener (addEventListener):

element.addEventListener("click", function(event) {
  console.log(event); // 👈 acá lo ves
});Lenguaje del código: JavaScript (javascript)

PASO 2

Hacés clic en el elemento.

PASO 3

Abrís la Consola del Navegador (F12 → pestaña «Console»).

RESULTADO:

Vas a ver un objeto enorme, por ejemplo:

PointerEvent {isTrusted: true, pointerId: 1, clientX: 248, clientY: 121, ...}Lenguaje del código: CSS (css)

Dentro vas a encontrar toda la info del evento, como:

• tipo (click, input, keydown…)
• posición del mouse
• elemento clickeado
• timestamp
• teclas presionadas
• propiedades específicas según el evento.

La imagen muestra dos partes:

1. A la izquierda: la página web
   • Se ve un botón que dice “Clickeame”. Este botón es el elemento que el usuario hace clic para generar el evento.
2. A la derecha: la consola del navegador
   • Después de hacer clic en el botón, la consola muestra el objeto PointerEvent, que es el tipo de evento generado por el clic. Dentro del objeto se pueden ver sus propiedades, como:
     • isTrusted: true
     • pointerId: 1
     • clientX: 248
     • clientY: 121
     • screenX, screenY
     • …y muchas otras.

Esto representa toda la información que el navegador genera automáticamente cuando ocurre el evento y que vos podés ver usando console.log(event).

1.3. Ejemplo simple para entenderlo

Imaginemos un botón:

<button id="miBoton">Haceme clic</button>Lenguaje del código: HTML, XML (xml)

Y el JavaScript:

document.getElementById("miBoton").addEventListener("click", function(event) {
  console.log(event);
});Lenguaje del código: JavaScript (javascript)

• Cuando hacés clic en el botón → ocurre el evento click.
• JavaScript ejecuta tu función.
• Esa función recibe un parámetro llamado event.
• Ese parámetro es la caja con toda la información del clic.

Si mirás la consola, vas a ver un objeto gigante con:

• target → el elemento donde ocurrió el clic
• type → el tipo de evento («click»)
• clientX, clientY → posición del mouse
• bubbles → si burbujea
• timeStamp → tiempo en que ocurrió
• y muchísimo más

1.4. ¿Por qué existe el objeto event? (La razón real)

Porque JavaScript necesita saber qué pasó y dónde pasó para poder reaccionar correctamente.

Sin el objeto event, no podrías saber:

• qué botón se clickeó
• si un usuario escribió en una caja de texto
• si apretó Enter
• si desplazó la página
• si tocó la pantalla
• qué elemento disparó la acción

Es como si escucharas un ruido en tu casa pero no supieras dónde ni qué lo produjo.

El objeto event te dice EXACTAMENTE eso.

2. ¿Por qué el objeto de evento se pasa automáticamente al handler?

2.1. ¿Qué es un Handler?

Un handler (también llamado event handler o “manejador de eventos”) es simplemente la función de JavaScript que se ejecuta cuando ocurre un evento.

Cuando escribís:

element.addEventListener("click", function(event) {
  console.log("Hiciste clic");
});Lenguaje del código: JavaScript (javascript)

La función:

function(event) { ... }Lenguaje del código: JavaScript (javascript)

👉 es el handler
👉 es la función que “maneja” lo que sucede cuando el evento ocurre

Un handler siempre es una función, y su trabajo es responder al evento.

2.1. ¿Qué significa “Que el objeto de evento se pasa automáticamente al handler”?

Significa que cuando el evento ocurre (por ejemplo, un clic), el navegador crea el objeto event y luego:

👉 se lo entrega a tu función
👉 lo pasa como primer ARGUMENTO del handler
👉 sin que vos tengas que hacer nada

Ejemplo:

button.addEventListener("click", function(e) {
  console.log(e);
});Lenguaje del código: JavaScript (javascript)

Vos no creaste e.
No lo declaraste.
No lo generaste.

El navegador lo creó y lo inyectó automáticamente dentro de tu handler.

Esto quiere decir:

• el navegador llama a tu handler y le pasa el objeto como parámetro
• tu handler siempre recibe ese argumento si lo pedís
• vos solo necesitás poner un nombre (event, e, miEvento, etc.)

1.3. ¿Por qué el navegador pasa el objeto event automáticamente?

1.3.1. Para darte toda la información del suceso

Si hacés clic, el navegador sabe:

• dónde clickeaste
• en qué elemento
• qué botón del mouse
• si había teclas presionadas
• coordenadas exactas
• la hora
• etc.

Toda esa info está dentro de event.

Si el navegador NO pasara el objeto, vos no tendrías forma de saber nada.

1.3.2. Para que el handler pueda reaccionar correctamente

Tu función necesita saber qué pasó para decidir qué hacer.

Ejemplo:

if (event.key === "Enter") { ... }
Lenguaje del código: JavaScript (javascript)

O:

if (event.target.matches(".btn")) { ... }
Lenguaje del código: JavaScript (javascript)

Sin el objeto event, tu función estaría “ciega”.

1.3.3. Porque cada evento es único

Cada clic es distinto:

• diferente posición
• diferente elemento
• diferente timestamp

Por eso el navegador crea un nuevo objeto Event para cada acción.

1.3.4. Para permitir funciones reutilizables

Con el objeto event, un solo handler puede manejar muchos eventos distintos.

Ejemplo: delegación de eventos en una lista.

1.3.5. Es parte del estándar de JavaScript y del DOM

W3C define que el navegador debe entregar el objeto event al handler para que cualquier script pueda manejar eventos de forma consistente.

RESUMEN:

• Un handler es la función que se ejecuta cuando el evento ocurre.
• El objeto event es creado por el navegador y contiene toda la información del suceso.
• “Se pasa automáticamente” significa que el navegador llama a tu handler y le entrega ese objeto como primer parámetro, sin que vos hagas nada.
• Esto permite que tu función sepa qué pasó, cómo pasó y en qué elemento pasó.

3. Propiedades fundamentales del objeto event.

Anteriormente dijimos cómo podemos ver la información que nos brinda el objeto event pero qué pasa si queremos ver solamente una información específica.

Aquí te explico cómo lo podemos hacer y qué propiedades debemos usar:

3.1. event.type — Tipo de Evento

❓ ¿Qué es?

Es un string que indica qué tipo de evento ocurrió.

Ejemplos de valores posibles:

• "click"
• "input"
• "submit"
• "keydown"
• "mouseover"

🎯 ¿Para qué sirve?

Te permite saber exactamente qué evento se activó, especialmente útil si un mismo handler gestiona varios eventos.

📌 Ejemplo:

document.addEventListener("click", function(event) {
  console.log(event.type); // "click"
});Lenguaje del código: JavaScript (javascript)

3.2. event.target — Elemento que originó el evento

❓ ¿Qué es?

Es el elemento exacto donde se produjo el evento.

Ejemplos:

• Si hacés clic en un botón → target es ese botón.
• Si escribís en un input → target es ese input.

🎯 ¿Para qué sirve?

• Saber en qué elemento ocurrió el evento.
• Obtener valores del input, texto, atributos, etc.
• Construir comportamientos dinámicos (muy usado en formularios y delegación de eventos).

📌 Ejemplo:

document.addEventListener("click", function(event) {
  console.log(event.target); // El elemento clickeado
});Lenguaje del código: JavaScript (javascript)

3.3. event.currentTarget — Elemento donde está registrado el listener

❓ ¿Qué es?

Es el elemento donde realmente está el listener registrado.

Esto es MUY importante cuando:

• Ocurre event bubbling (el evento sube por los padres)
• Usás delegación de eventos

🔥 Diferencia clave:

Propiedad	Qué indica
event.target	Dónde ocurrió el evento
event.currentTarget	Dónde está el listener

📌 Ejemplo:

<div id="padre">
  <button>Hijo</button>
</div>Lenguaje del código: HTML, XML (xml)

document.getElementById("padre").addEventListener("click", function(event) {
  console.log(event.target);        // El botón
  console.log(event.currentTarget); // El DIV padre
});Lenguaje del código: JavaScript (javascript)

3.4. event.timeStamp — Momento en que fue generado el evento

❓ ¿Qué es?

Un número que indica cuántos milisegundos pasaron desde que la página se cargó hasta que ocurrió el evento.

🎯 ¿Para qué sirve?

• Crear mediciones de tiempo internas.
• Controlar doble clics rápidos.
• Evitar eventos duplicados.
• Analizar rendimiento.

📌 Ejemplo:

document.addEventListener("click", function(event) {
  console.log(event.timeStamp); // Ej: 18562.23
});
Lenguaje del código: JavaScript (javascript)

3.5. event.defaultPrevented — Indica si se llamó a preventDefault()

❓ ¿Qué es?

Es un valor booleano (true o false) que indica si alguien llamó a:

event.preventDefault()
Lenguaje del código: CSS (css)

🎯 ¿Para qué sirve?

• Saber si el comportamiento por defecto del evento ya fue bloqueado.
• Es muy común en formularios y enlaces.

✔️ Comportamiento por defecto:

• En un <form>: enviar el formulario.
• En un <a href>: navegar a otro sitio.
• En un clic derecho: abrir el menú contextual.

📌 Ejemplo:

const link = document.querySelector("a");

link.addEventListener("click", function(event) {
  event.preventDefault(); // Bloquea la navegación
  console.log(event.defaultPrevented); // true
});Lenguaje del código: JavaScript (javascript)

3.6. Ejemplo mostrando propiedades fundamentales:

HTML

<button id="btn">Hacé clic</button>Lenguaje del código: HTML, XML (xml)

JavaScript

const btn = document.getElementById("btn");

btn.addEventListener("click", function(event) {

  console.log("event.type:", event.type); 
  // Tipo de evento → "click"

  console.log("event.target:", event.target); 
  // Elemento que originó el evento (el botón)

  console.log("event.currentTarget:", event.currentTarget); 
  // Elemento donde está registrado el listener (también el botón)

  console.log("event.timeStamp:", event.timeStamp); 
  // Momento exacto en que ocurrió el evento (en ms)

  console.log("event.defaultPrevented:", event.defaultPrevented);
  // false → aún no se llamó a preventDefault()

  // Ejemplo de preventDefault()
  event.preventDefault();

  console.log("event.defaultPrevented después:", event.defaultPrevented);
  // true → ahora sí, el preventDefault() fue activado
});Lenguaje del código: JavaScript (javascript)

🧠 ¿Qué muestra este ejemplo en la consola?

Cuando hacés clic en el botón, verás algo así:

event.type: click
event.target: <button id="btn">...</button>
event.currentTarget: <button id="btn">...</button>
event.timeStamp: 842.563
event.defaultPrevented: false
event.defaultPrevented después: trueLenguaje del código: JavaScript (javascript)

📌 ¿Qué aprendés con este ejemplo?

• event.type
  Te dice qué evento ocurrió (click, input, keydown…).
• event.target
  El elemento donde se originó el evento.
• event.currentTarget
  El elemento donde se ejecuta el listener.
• event.timeStamp
  Momento exacto (en milisegundos) en que ocurrió el evento.
• event.defaultPrevented
  true o false según si ya se llamó a preventDefault().

3.7. Resumen en cuadro:

Propiedad	¿Qué es?	¿Para qué sirve?
event.type	El tipo de evento	Saber qué evento ocurrió
event.target	Elemento donde se generó	Leer datos del elemento que disparó el evento
event.currentTarget	Elemento donde está el listener	Controlar bubbling y delegación de eventos
event.timeStamp	Momento del evento	Medir tiempos o evitar duplicados
event.defaultPrevented	Si se llamó a preventDefault()	Saber si el comportamiento por defecto fue bloqueado

4. Métodos clave del objeto event.

Los métodos del objeto event son funciones integradas que permiten controlar el comportamiento del evento y su recorrido dentro del DOM.

Estos métodos te dan el control total del flujo del evento, permitiéndote manejar las interacciones de forma precisa, profesional y completamente personalizada.

4.1. event.preventDefault()

✔ ¿Qué es?

Es un método que evita que se ejecute la acción por defecto del evento.

✔ ¿Qué significa “acción por defecto”?

Muchos elementos HTML tienen comportamientos automáticos:

• Un formulario: se envía y recarga la página.
• Un enlace <a href="">: navega a otra página.
• Un botón tipo submit: envía el formulario.
• Un clic derecho: abre el menú contextual del navegador.

✔ ¿Para qué sirve?

Para evitar que suceda lo que el navegador haría normalmente.

✔ Ejemplo:

form.addEventListener("submit", function(event){
  event.preventDefault();  // ❌ evita que el form se envíe
  console.log("El formulario NO se envió.");
});Lenguaje del código: JavaScript (javascript)

➡️ Esto es útil cuando vos querés validar campos antes de enviar, o procesar el envío por AJAX.

4.2. event.stopPropagation()

✔ ¿Qué es?

Es un método que detiene la propagación del evento hacia otros elementos.

✔ ¿Qué significa “propagación”?

Cuando hacés click en un elemento, el evento sube por los padres (bubbling):

DIV
 └── ARTICLE
      └── BUTTON  ← clic

Primero se dispara en el BUTTON, luego en el ARTICLE, luego en el DIV.

A esto se lo llama burbujeo (event bubbling).

✔ ¿Para qué sirve?

Para que el evento NO siga subiendo a los elementos padres.

✔ Ejemplo:

child.addEventListener("click", function(event){
  event.stopPropagation(); // 🛑 detiene el bubbling
  console.log("Se clickeó el hijo, pero el padre NO se entera.");
});Lenguaje del código: JavaScript (javascript)

➡️ Ideal cuando tenés componentes anidados y querés aislar sus comportamientos.

4.3. event.stopImmediatePropagation()

✔ ¿Qué es?

Es una versión más fuerte de stopPropagation().

✔ ¿Qué hace exactamente?

1. Detiene el bubbling (igual que stopPropagation()).
2. Además detiene otros handlers del mismo tipo registrados en el mismo elemento.

✔ ¿Qué significa esto?

Si el mismo elemento tiene varios listeners del mismo evento…

button.addEventListener("click", handler1);
button.addEventListener("click", handler2);
button.addEventListener("click", handler3);
Lenguaje del código: JavaScript (javascript)

…y en handler1 ponés:

event.stopImmediatePropagation();
Lenguaje del código: CSS (css)

👉 Entonces:

• handler1 se ejecuta
• ❌ handler2 NO se ejecuta
• ❌ handler3 NO se ejecuta
• ❌ Tampoco se propaga a los padres

✔ Ejemplo:

button.addEventListener("click", function(event){
  console.log("Handler 1");
  event.stopImmediatePropagation(); // ❌ bloquea el resto
});

button.addEventListener("click", function(event){
  console.log("Handler 2"); // 🚫 NO se ejecuta
});
Lenguaje del código: JavaScript (javascript)

4.4. Resumen de los tres métodos

Método	Qué hace	Cuándo usarlo
preventDefault()	Detiene la acción automática del navegador	Formularios, enlaces, inputs, menús, drag & drop
stopPropagation()	Detiene el bubbling (no se dispara en padres)	Componentes anidados, evitar duplicidad de lógicas
stopImmediatePropagation()	Detiene bubbling y bloquea otros listeners en el mismo elemento	Control absoluto de eventos, evitar interferencias internas

5. Tipos especializados de eventos (y sus propiedades).

🧩¿Qué Son Los Eventos Especializados?

En JavaScript, todos los eventos heredan del gran objeto base: Event.
Ese objeto tiene las propiedades más generales:

• type
• target
• currentTarget
• timeStamp
• defaultPrevented
• preventDefault()
• stopPropagation()
• etc.

👉 A estos los llamamos eventos comunes o “básicos”, porque son el punto de partida.

Pero…

Cuando la acción que ocurre es más específica —un clic, una tecla, un input, un toque en pantalla—
el navegador crea un tipo de evento especializado, que hereda de Event, pero agrega propiedades exclusivas.

🧩 Diferencia Entre Un Evento Común Y Un Evento Especializado

Tipo	Ejemplo	Qué Contiene
Evento común (Event)	load, DOMContentLoaded, change, submit	Solo las propiedades básicas
Evento especializado	click, keydown, input, touchstart, pointermove	Propiedades extra específicas del tipo de interacción

🔍 Un evento especializado contiene todo lo que tiene Event, más propiedades privadas para esa acción.

🧩 Tipos Especializados De Eventos (Explicados Con Propiedades Principales)

5.1. MouseEvent

Ocurre con acciones del mouse: click, dblclick, mousemove, mousedown, mouseup.

Propiedades especiales:

• clientX, clientY → posición del mouse en la pantalla
• button → cuál botón se presionó (0 izq, 1 medio, 2 der)
• buttons → botones actualmente activos
• screenX, screenY → coordenadas absolutas

👉 Se usa para interfaces que dependen de coordenadas (drag, canvas, juegos, UI).

EJEMPLO DE MouseEvent

<button id="btn">Haceme click</button>

<script>
document.getElementById("btn").addEventListener("click", function (event) {
  console.log("Tipo de evento:", event.type);          // "click"
  console.log("Posición X:", event.clientX);           // Coordenada horizontal del mouse
  console.log("Posición Y:", event.clientY);           // Coordenada vertical del mouse
  console.log("Botón del mouse:", event.button);       // 0 = izquierdo, 1 = medio, 2 = derecho
});
</script>Lenguaje del código: HTML, XML (xml)

Explicación

Cuando hacés click sobre el botón:

• ✔ 1. Se activa un MouseEvent
  • Específicamente el evento click, que ocurre cuando presionás y soltás el botón del mouse.
• ✔ 2. JavaScript crea automáticamente un objeto event
  • Este objeto contiene toda la información del mouse en ese momento.
• ✔ 3. Propiedades útiles del MouseEvent
  • event.type → dice qué evento ocurrió (por ejemplo "click").
  • event.clientX → posición horizontal del cursor respecto a la ventana.
  • event.clientY → posición vertical del cursor.
  • event.button → qué botón se usó:
    • 0 = izquierdo
    • 1 = rueda
    • 2 = derecho
• ✔ 4. ¿Para qué sirve esto?
  • Te permite saber exactamente dónde clickeó el usuario, qué botón usó y en qué contexto ocurrió el evento, lo cual es esencial para:
    • Dibujar en un canvas
    • Detectar clicks exactos en un mapa
    • Crear interacciones avanzadas
    • Manejar clicks derecho personalizados
    • Juegos con el mouse

5.2. KeyboardEvent

Ocurre cuando presionás una tecla: keydown, keyup.

Propiedades especiales:

• key → la tecla real (“a”, “Enter”, “ArrowUp”)
• code → posición física del teclado (“KeyA”, “Digit1”)
• altKey, ctrlKey, shiftKey, metaKey → modificadores activados

👉 Se usa en accesibilidad, atajos, formularios, juegos, hotkeys.

5.3. InputEvent

Ocurre cuando el valor de un input cambia: input.

Propiedades especiales:

• data → la letra que se insertó
• inputType → tipo de edición (“insertText”, “deleteContentBackward”)
• isComposing → si está en uso IME (teclados asiáticos, acentos, etc.)

👉 Fundamental para validaciones y UIs en tiempo real.

5.4. TouchEvent

Eventos táctiles en pantalla: touchstart, touchmove, touchend.

Propiedades especiales:

• touches → todos los dedos en pantalla
• changedTouches → dedos que cambiaron en este evento

👉 Se usa en apps móviles, gestos, sliders táctiles.

5.5. PointerEvent

Es la evolución moderna que reemplaza Touch + Mouse.

Combina:

• mouse
• lápiz digital
• touch

Propiedades especiales:

• pointerId → identifica cada dedo / mouse / lápiz
• pointerType → “mouse”, “touch”, “pen”
• pressure → presión del lápiz
• tiltX, tiltY → inclinación del lápiz

👉 Hoy es el estándar recomendado para interacción compleja.

5.6. FocusEvent

Ocurre cuando un elemento gana o pierde foco: focus, blur.

Propiedad especial:

• relatedTarget → elemento que perdió o ganó el foco

👉 Importantísimo en formularios y accesibilidad.

5.7. ClipboardEvent

Para copiar, cortar y pegar: copy, cut, paste.

Propiedad especial:

• clipboardData → acceder al portapapeles

👉 Se usa para personalizar copy/paste.

5.8. DragEvent

Para drag & drop (arrastrar y soltar).

Propiedad especial:

• dataTransfer → información que se arrastra

👉 Usado en interfaces de archivos, tableros Kanban, etc.

5.9. ProgressEvent

Se usa para cargas: AJAX, <video>, <audio>…

Propiedades especiales:

• loaded
• total

👉 Muestra el avance de descargas/subidas.

5.10. CustomEvent

Creado por vos mismo.

Propiedad especial:

• detail → información personalizada que vos enviás

element.dispatchEvent(new CustomEvent("miEvento", {
  detail: { mensaje: "Hola", id: 5 }
}));
Lenguaje del código: CSS (css)

👉 Sirve para arquitectura de componentes y comunicación interna.

5.11. Resumen:

• Todos los eventos nacen de Event
• Los eventos especializados extienden esa clase y agregan información crítica
• Según la interacción (mouse, teclado, input, touch…), el evento contiene propiedades diferentes
• Estos eventos permiten controlar con precisión cómo interactúa el usuario con la página