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, et espérer que cela fonctionne systématiquement :
<Paiement onclick={() => console.log('Vous avez payé')} />En effet, si rien de particulier n'est prévu, une instance de composant comme <Paiement /> n'est
pas censée savoir comment gérer un clic ou tout autre évènement, car elle ne sait pas d'avance sur
lequel de ses éléments appliquer le onclick (ou équivalent pour un autre type d'évènement).
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 cela vous arrange, 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.