JavaScript Academy · Lección

El objeto de evento

Lea detalles del evento, como target y type.

El objeto de evento es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.

El argumento del evento

Cuando se dispara un evento, el navegador pasa un objeto de evento a su función controladora. Este contiene detalles sobre lo ocurrido y sobre los elementos involucrados.

btn.addEventListener("click", (event) => {
  console.log(event.type); // "click"
});

event.type

event.type es el nombre del evento y permite que una misma función controladora reaccione de forma distinta a diferentes tipos de evento.

function handle(e) {
  console.log("Got a " + e.type + " event");
}

event.target

event.target es el elemento en el que se originó realmente el evento: el elemento más profundo con el que se interactuó.

list.addEventListener("click", (e) => {
  console.log(e.target); // the exact clicked element
});

event.currentTarget

event.currentTarget es el elemento cuyo listener se está ejecutando en ese momento, es decir, aquel sobre el que invocó addEventListener.

list.addEventListener("click", (e) => {
  console.log(e.currentTarget === list); // true
});

target frente a currentTarget

Cuando los eventos se propagan, target puede ser un hijo, mientras que currentTarget es el padre que está escuchando. Esta diferencia permite la delegación de eventos.

list.addEventListener("click", (e) => {
  // e.target = clicked <li>
  // e.currentTarget = the <ul>
});

Delegación de eventos

Asocie un solo listener a un elemento padre y use target.closest para encontrar qué hijo recibió la acción. Esto escala mejor que tener muchos listeners.

list.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (item) console.log(item.dataset.id);
});

event.timeStamp

event.timeStamp registra cuándo se creó el evento, lo que resulta útil para medir las duraciones entre eventos.

btn.addEventListener("click", (e) => {
  console.log(e.timeStamp);
});

Coordenadas en eventos del ratón

Los eventos del ratón incluyen datos de posición como clientX/clientY (relativos a la ventana gráfica) y pageX/pageY (relativos al documento).

area.addEventListener("click", (e) => {
  console.log(e.clientX, e.clientY);
});

Teclas modificadoras

Propiedades como e.shiftKey, e.ctrlKey, e.altKey y e.metaKey indican qué teclas modificadoras estaban pulsadas.

btn.addEventListener("click", (e) => {
  if (e.shiftKey) console.log("Shift-click");
});

event.isTrusted

event.isTrusted es true para eventos reales generados por el usuario y false para eventos creados mediante un script, lo que ayuda a distinguir las entradas auténticas.

btn.addEventListener("click", (e) => {
  console.log(e.isTrusted);
});

Leer la tecla

Los eventos del teclado exponen e.key (el carácter o el nombre) para que pueda reaccionar a teclas específicas.

input.addEventListener("keydown", (e) => {
  if (e.key === "Enter") console.log("submit");
});

Comprobación rápida

Distinga los dos destinos.

Repaso

El objeto de evento describe el evento: type, target (dónde se originó) y currentTarget (dónde está el listener). La diferencia entre estos últimos permite la delegación de eventos. Los eventos también exponen coordenadas, teclas modificadoras, key, timeStamp e isTrusted.

Preguntas frecuentes

¿La lección «El objeto de evento» es gratis?

Sí — el texto completo de «El objeto de evento» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «El objeto de evento»?

Lea detalles del evento, como target y type. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar JavaScript Academy?

No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «El objeto de evento»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?

Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a JavaScript Academy