Eventos personalizados en JavaScript

Tu propio tipo de evento, con carga útil, burbujeando como cualquier otro.

function announce(element, stars) {
  const event = new CustomEvent("step:cleared", {
    detail: { stars, at: Date.now() },
    bubbles: true,
    cancelable: true,
  });
  const proceeded = element.dispatchEvent(event);
  return { proceeded, defaultPrevented: event.defaultPrevented };
}

function listen(root) {
  root.addEventListener("step:cleared", (event) => {
    if (event.detail.stars < 1) event.preventDefault();
  });
}

Cómo funciona

1. detail lleva la carga útil.
2. bubbles decide si un ancestro puede oírlo.
3. preventDefault funciona si el evento es cancelable.

Palabras clave y builtins usados aquí

• Date
• const
• function
• if
• return

El intento, en números

Líneas

15

Caracteres a escribir

403

Tokens

101

Ritmo de tres estrellas

100 tpm

Al ritmo de tres estrellas de 100 tokens por minuto, este intento toma unos 61 segundos.

Escribe este fragmento

Paso 3 de 3 en Eventos; paso 6 de 13 en El navegador.

← Anterior Siguiente →