Cuando trabajamos con eventos en JavaScript, especialmente en frameworks como Svelte, es fundamental entender cómo se propagan y cómo podemos aprovechar la información que llevan consigo. En muchas ocasiones, al definir un manejador de eventos, podemos omitir explícitamente los parámetros, pero detrás de escena siempre existe un parámetro implícito llamado event que contiene toda la información relevante sobre el evento que acaba de ocurrir.
Al inspeccionar este objeto event, podemos ver detalles como el tipo de evento, el elemento que lo disparó (target), y un campo muy interesante llamado detail. Este campo detail es especialmente útil porque nos permite enviar datos adicionales junto con el evento, algo que no está disponible por defecto pero que puede enriquecer la comunicación entre componentes.
Por ejemplo, imaginemos que queremos enviar la fecha y hora exacta en la que se ha producido un evento. Podemos crear un objeto detail que incluya esta información y pasarla cuando disparamos el evento. En Svelte, esto se hace mediante el método dispatch que acepta como segundo parámetro un objeto con la propiedad detail. Así, cuando el evento se propaga, quien lo reciba podrá acceder a esa información extra a través de event.detail.
Veamos un ejemplo práctico de cómo implementar esto. Supongamos que tenemos un botón que, al pulsarlo, dispara un evento personalizado con la fecha actual incluida en detail:
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
function handleClick() {
const fecha = new Date().toLocaleString();
dispatch('pulsado', { detail: { fecha } });
}
En el componente padre o en quien escuche este evento, podemos capturar esa fecha desde event.detail.fecha y utilizarla para actualizar un array de fechas que mostramos en pantalla. Sin embargo, hay un detalle importante a tener en cuenta en Svelte: para que la actualización del array sea detectada y se reactive la reactividad, no basta con usar métodos mutativos como push. En lugar de eso, debemos crear un nuevo array que incluya los elementos anteriores más el nuevo, y asignarlo de nuevo a la variable. Esto asegura que Svelte detecte el cambio y actualice la interfaz.
Por ejemplo, si tenemos una variable fechas que es un array, para añadir una nueva fecha haríamos algo así:
fechas = [...fechas, event.detail.fecha];
Esto es preferible a hacer simplemente fechas.push(event.detail.fecha), porque Svelte no detecta cambios en arrays si no hay una asignación explícita.
Este mecanismo de enviar datos adicionales con event.detail es muy útil en situaciones más complejas, como cuando queremos comunicar que un formulario ha sido enviado y además pasar los datos que el usuario ha introducido. Así, el componente que recibe el evento puede procesar esa información, enviarla a un servidor o realizar cualquier otra acción necesaria.
Además del parámetro detail, el método dispatch acepta un tercer parámetro llamado options, que permite configurar aspectos como si el evento es cancelable, pero esto suele ser más relevante para la lógica interna del motor y no es algo que usemos habitualmente en la mayoría de los casos.
Por último, es importante recordar que en Svelte los eventos personalizados se propagan hacia el componente inmediatamente superior, lo que tiene implicaciones en cómo diseñamos la comunicación entre componentes y cómo gestionamos la propagación de eventos. Este tema merece una atención especial y puede ser motivo de análisis más detallados para entender mejor su comportamiento y optimizar nuestras aplicaciones.