Events

You can listen to any DOM event (such as click or pointermove) with an on<name> function.
ex.

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

You can also use the shorthand notation for {onpointermove} as discussed in beginnings.

Event handlers can also be declared inline:

<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>

Event capturing

Normally, event handlers run during the event bubbling phase. In the following example if you type something into the input, the inner handler runs first (i.e. you get an alert from the input), as the event ‘bubbles’ up from the target up to the document, followed by the outer handler.
ex.

<div onkeydown={(e) => alert(`<div> ${e.key}`)} role="presentation">
	<input onkeydown={(e) => alert(`<input> ${e.key}`)} />
</div>

It’s possible to reverse this relative order using event capturing, as sometimes you’d want handlers to run during the capture phase instead. To do this, just add capture at the end of the event name.
ex.

<div onkeydowncapture={(e) => alert(`<div> ${e.key}`)} role="presentation">
	<input onkeydowncapture={(e) => alert(`<input> ${e.key}`)} />
</div>

The capturing handlers will run first if both capturing and non capturing handlers are declared.

Passing event handlers as props to components

You can pass event handlers to components like any other prop.
ex. in Stepper.svelte

<script>
	let {increment, decrement} = $props();
</script>
 
<button onclick={decrement}>-1</button>
<button onclick={increment}>+1</button>

and in App.svelte

<script>
	import Stepper from './Stepper.svelte';
	let value = $state(0);
</script>
 
<p>The current value is {value}</p>
 
<Stepper increment={() => value +=1} decrement={() => value -=1}/>

You can even spread event handlers directly onto elements, ex.

<button {...props}>
    Push
</button>

For more information on spreading props, see Props.