Gestionar eventos en Svelte es una tarea sencilla y natural que nos permite hacer nuestras aplicaciones web mucho más dinámicas e interactivas. Los eventos son esas interacciones del usuario que ocurren en el navegador, como hacer clic en un botón, cambiar el valor de un campo de texto o seleccionar una opción en un combo box. Si hemos trabajado con JavaScript tradicional, seguramente nos suenen conceptos como addEventListener o atributos como onclick.
En Svelte, la gestión de eventos se basa en la API DOM estándar, por lo que no tenemos que reinventar la rueda. La diferencia principal es que para declarar un evento usamos un atributo que comienza con on: seguido del nombre del evento. Por ejemplo, para capturar un clic en un botón, usaremos on:click. Esto es muy parecido a usar onclick en HTML, pero con la sintaxis propia de Svelte.
Para ilustrarlo, podemos crear un botón con el texto hazme click si te atreves. Al principio, este botón no hace nada, pero si le añadimos el atributo on:click y le asignamos una función, podremos ejecutar código cada vez que el usuario pulse el botón. En Svelte, el valor de este atributo se escribe entre llaves {}, donde podemos poner cualquier expresión JavaScript válida.
Una forma rápida de hacerlo es pasar una función anónima que imprima un mensaje en la consola:
<button on:click={() => console.log('me han pulsado')}>
hazme click si te atreves
</button>
Cuando pulsamos el botón, veremos en la consola el mensaje me han pulsado. Esta es una forma muy directa, pero para mantener el código más limpio y organizado, es mejor definir la función en la sección <script> y luego pasar su referencia al evento:
<script>
function gestionarClick() {
console.log('me han pulsado otra vez');
}
</script>
<button on:click={gestionarClick}>
hazme click si te atreves
</button>
Así, cada vez que el botón se pulse, se ejecutará la función gestionarClick y veremos el mensaje correspondiente en la consola.
Los eventos que podemos gestionar en Svelte son los mismos que en la API DOM tradicional: onclick, onchange, onkeyup, onkeydown, onfocus, oncontextmenu, entre muchos otros. Para conocer todos los eventos disponibles y su comportamiento, es útil consultar la documentación de MDN sobre la API DOM.
Además, en aplicaciones más complejas, podemos gestionar eventos de formularios como onsubmit para controlar el envío y, por ejemplo, evitar que la página se recargue y manejar el envío mediante AJAX. También existe la posibilidad de crear eventos personalizados cuando la lógica de la aplicación lo requiera, aunque eso lo veremos más adelante.
Por último, en próximas lecciones profundizaremos en cómo funcionan los parámetros que reciben las funciones manejadoras de eventos, ya que hasta ahora hemos visto ejemplos sin ellos, pero entenderlos es fundamental para aprovechar al máximo la reactividad y la interacción en Svelte.