on:

En mode runes, les gestionnaires d’évènements sont fournis comme n’importe quel attribut ou prop.

En mode legacy, il faut utiliser la directive on: :

<script>
	let count = 0;

	/** @param {MouseEvent} event */
	function handleClick(event) {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	compteur : {count}
</button>

<script lang="ts">
	let count = 0;

	function handleClick(event: MouseEvent) {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	compteur : {count}
</button>

Les gestionnaires peuvent être déclarés de manière inline sans pénaliser les performances :

<button on:click={() => (count += 1)}>
	compteur : {count}
</button>

Vous pouvez ajouter des modificateurs aux gestionnaires d’évènement d’éléments grâce au caractère |.

<form on:submit|preventDefault={handleSubmit}>
	<!-- le comportement par défaut de `submit` est
				empêché, pour éviter un rechargement de la page -->
</form>

Les modificateurs suivants sont disponibles :

• preventDefault — appelle event.preventDefault() avant d’exécuter le gestionnaire
• stopPropagation — appelle event.stopPropagation(), empêchant l’évènement d’atteindre l’élément suivant
• stopImmediatePropagation — appelle event.stopImmediatePropagation(), empêchant les autres gestionnaires du même évènement d’être exécutés
• passive — améliore la performance du défilement pour les évènements touch/wheel (Svelte l’ajoute automatiquement lorsque cela ne pose pas de problème)
• nonpassive — définit explicitement passive: false
• capture — déclenche le gestionnaire pendant la phase de capture plutôt que pendant la phase de bubbling
• once — supprime le gestionnaire après sa première exécution
• self — ne déclenche le gestionnaire que si event.target est l’élément lui-même
• trusted — ne déclenche le gestionnaire que si event.isTrusted vaut true. C’est-à-dire sir l’évènement est déclenché par une action de l’utilisateur

Les modificateurs peuvent être chaînés, par ex. on:click|once|capture={...}.

Si la directive :on est utilisée sans valeur, le composant va relayer l’évènement, ce qui signifie qu’un composant parent de celui-ci peut écouter cet évènement.

<button on:click>
	Le composant lui-même va émettre l'évènement click
</button>

Il est possible d’avoir plusieurs gestionnaires d’évènement pour le même évènement :

<script>
	let count = 0;

	function increment() {
		count += 1;
	}

	/** @param {MouseEvent} event */
	function log(event) {
		console.log(event);
	}
</script>

<button on:click={increment} on:click={log}>
	clics : {count}
</button>

<script lang="ts">
	let count = 0;

	function increment() {
		count += 1;
	}

	function log(event: MouseEvent) {
		console.log(event);
	}
</script>

<button on:click={increment} on:click={log}>
	clics : {count}
</button>

Évènements de composant

Les composants peuvent générer des évènemnts en créant un dispatcher lors de leur initialisation :

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

<button on:click={() => dispatch('decrement')}>décrémenter</button>
<button on:click={() => dispatch('increment')}>incrémenter</button>

<script lang="ts">
	import { createEventDispatcher } from 'svelte';
	const dispatch = createEventDispatcher();
</script>

<button on:click={() => dispatch('decrement')}>décrémenter</button>
<button on:click={() => dispatch('increment')}>incrémenter</button>

dispatch crée un CustomEvent. Si un deuxième argument est fourni, il devient alors la propriété detail sur l’objet de l’évènement.

Un composant parent de ce composant peut alors écouter les évènements que ce dernier émet :

<script>
	import Stepper from './Stepper.svelte';

	let n = 0;
</script>

<Stepper
	on:decrement={() => n -= 1}
	on:increment={() => n += 1}
/>

<p>n : {n}</p>

Les évènements de composants ne “bubblent” pas — un composant parent peut uniquement écouter les évènements de ses enfants directs.

Mis à part once, les modificateurs ne sont pas applicables sur les gestionnaires d’évènement de composant.

Si vous prévoyez une éventuelle migration vers Svelte 5, utilisez plutôt des props de callback pour vos gestionnaires d’évènement. Cela facilitera votre migration, puisque createEventDispatcher est déprécié :

Stepper

<script>
	export let decrement;
	export let increment;
</script>

<button on:click={decrement}>décrémenter</button>
<button on:click={increment}>incrémenter</button>

<script lang="ts">
	export let decrement;
	export let increment;
</script>

<button on:click={decrement}>décrémenter</button>
<button on:click={increment}>incrémenter</button>