Trabajar con eventos en Svelte

Aprenda a trabajar con eventos en Svelte

Escuchando eventos DOM

En Svelte puedes definir un detector para un evento DOM directamente en la plantilla, utilizando la on:eventsintaxis.

Por ejemplo, para escuchar el clickevento, pasará una función al on:clickatributo.

Para escuchar el onmousemoveevento, pasará una función al on:mousemoveatributo.

A continuación se muestra un ejemplo con la función de manejo definida en línea:

button on_click={() = { alert('clicked')}}Click me/button

y aquí hay otro ejemplo con la función de manejo definida en la scriptsección del componente:

scriptconst doSomething = () = { alert('clicked')}/scriptbutton on_click={doSomething}Click me/button

Prefiero incluirlo en línea cuando el código no es demasiado extenso. Si tiene solo 2 o 3 líneas, por ejemplo, de lo contrario, lo movería hacia arriba en la sección de script.

Svelte pasa el controlador de eventos como argumento de la función, lo que resulta útil si necesita detener la propagación o hacer referencia a algo en el objeto Evento :

scriptconst doSomething = event = { console.log(event) alert('clicked')}/scriptbutton on_click={doSomething}Click me/button

Ahora, mencioné “detener la propagación”. Es algo muy común, por ejemplo, para detener eventos de envío de formularios. Svelte nos proporciona modificadores , una forma de aplicarlo directamente sin hacerlo manualmente. stopPropagationy preventDefaultson los 2 modificadores que más usarás, creo.

Aplicas un modificador como este:button on:click|stopPropagation|preventDefault={doSomething}Click me/button

Hay otros modificadores que son más específicos. capturePermite capturar eventos en lugar de burbujear , oncesolo dispara el evento una vez, selfsolo dispara el evento si el objetivo del evento es este objeto (eliminándolo de la jerarquía de burbujeo/captura).

Creando tus eventos en componentes

Lo interesante es que podemos crear eventos personalizados en componentes y utilizar la misma sintaxis de los eventos DOM integrados.

Para ello, debemos importar la createEventDispatcherfunción del sveltepaquete y llamarla para obtener un despachador de eventos:

script import { createEventDispatcher } from 'svelte' const dispatch = createEventDispatcher()/script

Una vez que lo hagamos, podemos llamar a la dispatch()función, pasando una cadena que identifica el evento (que usaremos para la on:sintaxis en otros componentes que usen esto):

script import { createEventDispatcher } from 'svelte' const dispatch = createEventDispatcher() //when it's time to trigger the event dispatch('eventName')/script

Ahora otros componentes pueden usar el nuestro usando

ComponentName on_eventName={event = { //do something}} /

También puedes pasar un objeto al evento, pasando un segundo parámetro a dispatch():

script import { createEventDispatcher } from 'svelte' const dispatch = createEventDispatcher() const value = 'something' //when it's time to trigger the event dispatch('eventName', value) //or dispatch('eventName', { someProperty: value })/script

El objeto pasado dispatch()está disponible en el eventobjeto como event.detail.

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase

Trabajar con eventos en Svelte

En Svelte puedes definir un detector para un evento DOM directamente en la plantilla, utilizando la on:eventsintaxis. Aprenda a trabajar con eventos en Svelte

programar

es

https://aprendeprogramando.es/static/images/programar-trabajar-con-eventos-en-svelte-2163-0.jpg

2025-01-22

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente