5. Gérer les évènements
Évènementaire mon cher Watson !
L'interactivité d'une page web passe par la gestion d'évènements, souvent des clics, mais pas que.
En HTML, pour écouter un évènement sur un élément et y réagir, il faut utiliser l'attribut on...,
par exemple onclick, onmousemove, etc.
<button onclick="console.log('coucou')">Dire coucou</button>Vous pouvez faire la même chose avec Svelte, mais en passant une fonction à l'attribut de gestion d'évènement :
<button onclick={() => console.log('coucou')}>Dire coucou</button>Évènements de composant
Une instance de composant Svelte n'est pas un élément HTML. Cela signifie que vous ne pouvez pas simplement écrire la chose suivante :
<Paiement onclick={() => console.log('Vous avez payé')} />En effet, par défaut, si vous ne faites rien de spécial, rien n'est prévu pour gérer un clic, ou
tout autre évènement HTML, sur une instance de composant, comme <Paiement /> par exemple.
En revanche, vous pouvez très bien décider que onclick est une props de votre composant, en le
déclarant explicitement, puis en l'utilisant comme gestionnaire d'évènement sur un élément HTML :
<!-- Paiement.svelte -->
<script>
const { onclick } = $props();
</script>
<button {onclick}>Payer</button>Parfois, il peut être pratique d'expliciter les noms de ces props de gestion d'évènement. Par
exemple, ici, onclick n'est pas très parlant. Si vous avez envie, vous pouvez très bien décider de
renommer cette props.
<!-- Panier.svelte -->
<Paiement checkout={() => console.log('Vous avez payé')} /><!-- Paiement.svelte -->
<script>
const { checkout } = $props();
</script>
<button onclick={checkout}>Payer</button>Les props de gestion d'évènement sont des props comme les autres, elles n'ont rien de spécial, si ce n'est qu'on les assigne à des fonctions.