Guías Técnicas

Guía de Manejo de Eventos en Svelte

Eventos del DOM en Svelte (on:)

En Svelte, puedes manejar eventos del DOM utilizando el atributo on:evento. Esta es una forma directa de escuchar y reaccionar a eventos como clics, envíos de formularios, movimientos del mouse, entre otros.

Ejemplo básico: Manejo de clics

js 
<script>
let contador = 0;

function incrementar() {
  contador += 1;
}
</script>

<button on:click={incrementar}>Click me</button>
<p>Has hecho clic {contador} veces.</p>

En este contexto, on:click={incrementar} escucha el evento click y ejecuta la función incrementar.

Modificadores de eventos

Los modificadores de eventos te permiten modificar el comportamiento predeterminado del evento directamente desde el atributo del evento. Algunos modificadores comunes son:

preventDefault

Evita el comportamiento predeterminado del navegador, como recargar la página al enviar un formulario.

js 
<script>
function manejarEnvio() {
  alert('Formulario enviado sin recargar la página.');
}
</script>

<form on:submit|preventDefault={manejarEnvio}>
<input type="text" placeholder="Escribe algo..." />
<button type="submit">Enviar</button>
</form>

stopPropagation

Evita que el evento se propague hacia los elementos padre.

js 
<script>
function padreClick() {
  alert('Click en el padre');
}

function hijoClick() {
  alert('Click en el hijo');
}
</script>

<div on:click={padreClick} style="padding: 20px; background: lightblue;">
<button on:click|stopPropagation={hijoClick}>Click en el hijo</button>
</div>

En este escenario, stopPropagation evita que el clic en el botón “hijo” active también el evento en el div padre.

Otros modificadores

  • once: Escucha el evento solo una vez.
  • passive: Permite un mejor rendimiento en eventos de desplazamiento.
js 
<button on:click|once={() => alert('Solo una vez')}>Haz clic</button>

Binding en Svelte (bind:)

El binding en Svelte permite una sincronización automática entre una variable y una propiedad del DOM o componente.

Binding en inputs de texto

js 
<script>
let nombre = '';
</script>

<input type="text" bind:value={nombre} placeholder="Escribe tu nombre" />
<p>Hola, {nombre}!</p>

Aquí:

  • bind:value sincroniza la variable nombre con el valor del input.

Binding a propiedades del DOM

Puedes usar binding para propiedades como checked en un checkbox:

js 
<script>
let suscrito = false;
</script>

<label>
<input type="checkbox" bind:checked={suscrito} /> Suscribirme
</label>
<p>{suscrito ? 'Gracias por suscribirte!' : 'No estás suscrito.'}</p>

El checkbox está vinculado a la variable suscrito usando bind:checked, y su estado se refleja en el mensaje, que cambia dinámicamente según si está marcado o no.

Binding a un grupo de inputs

Se usa bind:group para vincular los botones de radio a la variable color, lo que actualiza su valor según la opción seleccionada. El valor de color se refleja en el párrafo automáticamente.

js 
<script>
let color = 'rojo';
</script>

<label>
<input type="radio" bind:group={color} value="rojo" /> Rojo
</label>
<label>
<input type="radio" bind:group={color} value="azul" /> Azul
</label>
<p>Color seleccionado: {color}</p>

Binding a dimensiones del DOM

Puedes obtener las dimensiones de un elemento utilizando bind: con propiedades como offsetWidth y offsetHeight:

js 
<script>
let ancho, alto;
</script>

<div bind:offsetWidth={ancho} bind:offsetHeight={alto} style="background: lightcoral;">
Cambia el tamaño de la ventana.
</div>
<p>Ancho: {ancho}px, Alto: {alto}px</p>