Eventos del DOM

• Es posible escuchar cualquier evento DOM en un elemento (como clic o movimiento del puntero)
• Utilizando la función on<name>
• Al igual que con cualquier otra propiedad donde el nombre coincide con el valor, se puede usar la forma abreviada, ejemplo; onpointermove={onpointermove} => {onpointermove}

<script>
  let m = $state({x: 0, y: 0});
  
  function onpointermove(event) {
   m.x = event.clientX;
   m.y = event.clientY;
  }
</script>

// Forma abreviada {onpointermove}
<div {onpointermove} role="presentation">
  The pointer is at {Math.round(m.x)} x {Math.round(m.y)}
</div>

// Forma completa onpointermove={onpointermove}
<div onpointermove={onpointermove} role="presentation">
  The pointer is at {Math.round(m.x)} x {Math.round(m.y)}
</div>

inline handlers

También se pueden declarar los controladores de eventos dentro de las etiquetas

App.svelte

<script>
	let m = $state({ x: 0, y: 0 });
	
	//function onpointermove(event) {
	//	m.x = event.clientX;
	//	m.y = event.clientY;
	//}
</script>

<div 
	onpointermove={(event) => {
		m.x = event.clientX;
		m.y = event.clientY;
	}}
	role="presentation"
>
	The pointer is at {Math.round(m.x)} x {Math.round(m.y)}
</div>

Controlador de eventos como props

Se puede pasar los event handlers (funciones) a los componentes como cualquier otra propiedad

App.svelte

<script lang="ts">
  import Stepper from "./Stepper.svelte";
  
  let value = $state(0);
</script>

<p>The current value is {value}</p>

<Stepper 
  increment={() => value += 1}
  decrement={() => value -= 1}
/>

Stepper.svelte

<script lang="ts">
  let { increment, decrement } = $props();
</script>

<button onclick={increment}>+1</button>
<button onclick={decrement}>-1</button>

Spreading events

También se pueden extender (spread) los event handlers directamente a los elementos

App.svelte

<script>
  import BigRedButton from "./BigRedButton.svelte";
  import horn from "./horn.mp3";
  
  const audio = new Audio();
  audio.src = horn;
  
  function honk(){
    audio.load();
    audio.play();
  }
</script>

<BigRedButton onclick={honk} />

BigRedButton.svelte

<script>
  let props = $props();
</script>

// Se paso un evento de tipo onclick o cualquier otro
<button {...props}>
  Push
</button>

<style>
  button {
  
  }
  
  button:active {
  
  }
</style>