JavaScript Academy · Lección

Eventos personalizados

Cree y envíe sus propios eventos.

Eventos personalizados es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 4 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.

Más allá de los eventos integrados

El DOM permite crear y despachar sus propios eventos con CustomEvent. Esto desacopla partes de la aplicación: un componente anuncia que ha ocurrido algo y otros escuchan sin tener una referencia directa.

Crear un CustomEvent

Construya uno con new CustomEvent(name, options). El nombre puede ser cualquier cadena que elija.

const evt = new CustomEvent("cart:add");
console.log(evt.type); // "cart:add"

Despacharlo

Active el evento en un destino mediante dispatchEvent. Se ejecutará cualquier listener registrado para ese nombre en el destino (o en un ancestro, si el evento burbujea).

element.dispatchEvent(new CustomEvent("cart:add"));

Escucharlo

Escúchelo igual que un evento nativo, usando addEventListener con el nombre personalizado.

element.addEventListener("cart:add", () => {
  console.log("Something was added to the cart");
});

Pasar datos con detail

Adjunte una carga útil mediante la propiedad detail. Los listeners la leen desde event.detail.

const evt = new CustomEvent("cart:add", {
  detail: { id: 42, qty: 2 }
});
element.dispatchEvent(evt);

Leer la carga útil

Dentro del listener, event.detail contiene todo lo que haya pasado. Puede ser cualquier valor: un objeto, un array, una cadena o un número.

element.addEventListener("cart:add", (e) => {
  console.log(e.detail.id, e.detail.qty); // 42 2
});

Hacer que burbujee

De forma predeterminada, los eventos personalizados NO burbujean. Establezca bubbles: true para que los ancestros y los listeners delegados puedan recibirlo.

const evt = new CustomEvent("cart:add", {
  bubbles: true,
  detail: { id: 42 }
});
child.dispatchEvent(evt); // parents can now listen

La opción cancelable

Establezca cancelable: true para permitir que los listeners llamen a preventDefault(). El código que despacha el evento comprueba el valor devuelto por dispatchEvent para saber si se canceló.

const evt = new CustomEvent("form:submit", { cancelable: true });
const proceed = form.dispatchEvent(evt);
if (proceed) actuallySubmit();

Un patrón de desacoplamiento

Los eventos personalizados permiten que los módulos se comuniquen sin importarse entre sí. Una capa de registro o de analítica puede escuchar en document los eventos de toda la aplicación.

document.addEventListener("user:login", (e) => {
  analytics.track("login", e.detail.userId);
});
document.dispatchEvent(
  new CustomEvent("user:login", { detail: { userId: 7 } })
);

Convenciones de nomenclatura

Use espacios de nombres para los nombres de los eventos (como cart:add y user:login) con el fin de evitar colisiones con eventos nativos y agrupar claramente los eventos relacionados.

Sintaxis antigua y nueva

Es posible que encuentre la API heredada document.createEvent en código antiguo. Prefiera el constructor moderno new CustomEvent(...); es más sencillo y es la única forma que debería escribir actualmente.

const evt = new CustomEvent("ready", { detail: 1 });

Comprobación rápida

Compruebe sus conocimientos sobre los eventos personalizados.

Resumen

Use new CustomEvent(name, { detail, bubbles, cancelable }) y dispatchEvent para crear sus propios eventos. Lea la carga útil mediante event.detail, habilite el burbujeo para la delegación y use cancelable para las acciones que puedan cancelarse. Los eventos personalizados desacoplan los componentes siguiendo un estilo limpio de publicación y suscripción.

Preguntas frecuentes

¿La lección «Eventos personalizados» es gratis?

Sí — el texto completo de «Eventos personalizados» 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 «Eventos personalizados»?

Cree y envíe sus propios eventos. 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 4 de 4.

¿Cuánto tiempo toma la lección «Eventos personalizados»?

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