Durante estos primeros temas, hemos visto eventos como click, keydown o mouseenter. Sería fantástico poder crear nuestros propios eventos para que se disparen automáticamente al ocurrir casos determinados que nos interesen. Eso es exactamente lo que son los Custom Events (Eventos personalizados).
Custom Events
Crear un evento personalizado en Javascript es muy sencillo. Se basa en crear una instancia del objeto CustomEvent, al cuál le pasaremos un
Así pues, definir un evento personalizado se haría de la siguiente forma:
const event = new CustomEvent("message", options);
Analicemos bien esos parámetros:
Nombre del evento
El nombrado de eventos es un tema muy importante. En ejemplos sencillos no suele ser muy relevante, pero a largo plazo se vuelve algo imprescindible. Lo aconsejable es seguir una buena convención de nombres para los eventos, que sean «autoexplicativos» en cuanto la acción que vamos a realizar y a la vez sea coherente y fácil de recordar.
Aunque no hay una forma universal de hacerlo, aquí van algunos consejos:
- 1️⃣ Los eventos son case sensitive. Elige todo mayúsculas, o todo en minúsculas.
- 2️⃣ Evita
camelCase, suele inducir a dudas. Si has elegido todo en minúsculas, usakebab-case. - 3️⃣ Es conveniente usar namespaces y un separador. Ej:
user:data-messageouser.data-message.
Siempre puedes usar nombres simples si lo deseas, pero si planeas utilizar muchos eventos, es preferible usar namespaces para mantenerlo organizado. En este último caso, se ve claro y se entiende bien: un evento de usuario
user, que recibe undata-message.
Opciones del evento
El segundo parámetro del CustomEvent es un
| Opciones | Valor inicial | Descripción |
|---|---|---|
detail | null | Opcional. Objeto que contiene información que queremos transmitir. |
bubbles | false | Indica si el evento se propagará por el DOM (ver propagación) |
composed | false | Indica si la propagación puede atravesar Shadow DOM (ver web components) |
cancelable | false | Indica si el comportamiento se puede cancelar con preventDefault() |
El objeto detail es simplemente un objeto donde podemos añadir información para enviar en el evento y recuperarla en su destino. Es opcional, sólo la añadimos si necesitamos esa información adicional.
Ahora que tenemos la teoría clara, vamos a ver un ejemplo de código donde ilustramos esa información. Crearemos un evento personalizado con el nombre data-message:
const event = new CustomEvent("data-message", {
detail: {
from: "Manz",
message: "Hello!"
},
bubbles: true,
composed: true
});
- 1️⃣ Creamos un evento con nombre
data-message. Usa namespace si quieres organizar mejor. - 2️⃣ En
detailañadimos la información que queremos enviar en el evento. Opcional. - 3️⃣ Con
bubblesdefinimos que el evento se propagará por el DOM. En caso contrario, sólo se enviará al elemento que lo disparó con.dispatchEvent(). Ver propagación de eventos para más información. - 4️⃣ Con
composeddefinimos que el evento puede atravesar Shadow DOM. Ver Web Components para más información.
Simular evento del navegador
En este artículo estamos creando un evento personalizado CustomEvent, ya que los eventos Event se utilizar cuando se trata de eventos existentes en el navegador. De hecho, Event es la clase genérica, pero normalmente los eventos suelen pertenecer a una clase más específica: PointerEvent, WheelEvent, KeyboardEvent, etc...
Aún así, nosotros podemos «falsear» un evento de navegador y crearlo nosotros mismos, simulando que ha sido realizado por un usuario real. En el siguiente ejemplo, tenemos dos elementos: un <button> y un <span>:
const button = document.querySelector("button");
const text = document.querySelector(".text");
button.addEventListener("click", () => alert("Has pulsado el botón"));
text.addEventListener("mouseenter", () => {
const event = new Event("click");
button.dispatchEvent(event);
});
<button>Click me</button>
<span class="text">Hover me</span>
Hemos añadido un evento para que muestre un mensaje cuando hagas click en el <button>. Sin embargo, también hemos añadido otro evento en el <span> para que cuando muevas el ratón sobre él, cree un nuevo evento de click de ratón y lo envíe al botón. De esta forma, se disparará el otro evento en escucha como si el usuario real hubiera hecho click en el botón.
El funcionamiento del método
dispatchEventno importa en este punto. Lo explicaremos detenidamente en el siguiente artículo.
Event vs CustomEvent
Al margen del detalle que explicamos en el apartado anterior, normalmente los Event se usan solamente para eventos reales del navegador. Si necesitamos crear un evento propio utiliza siempre CustomEvent:
const event = new Event("click", { detail: 123 });
event.detail // undefined
const event = new CustomEvent("super-click", { detail: 123 });
event.detail // 123
Por ejemplo, un detalle muy importante es que los CustomEvent permiten añadir información adicional al crear el objeto, mientras que el objeto Event no la guarda, aunque lo definas en el código.
