CATALOGUE Code & Data Formation Svelte Apprendre Svelte 3 et SvelteKit 1.0

Transmettre des Événements DOM en Svelte

Retour à la formation
Chapitre 4 Leçon 6
Précédent
Suivant

Découvrez comment transmettre des événements DOM entre composants Svelte à travers un exemple pratique.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous allons explorer comment un composant Svelte peut transmettre des événements DOM à son parent en utilisant des custom events. Nous allons créer une application Svelte avec deux composants : App et Enfant. Le composant Enfant contiendra un simple bouton et transmettra plusieurs événements personnalisés comme OnClick, OnMouseEnter et OnMouseOut.

Nous intégrerons ces événements dans le composant App en définissant trois fonctions spécifiques pour gérer chacun de ces événements. La fonction EVClick mettra à jour une variable d'état indiquant que le bouton a été cliqué. EVMouseEnter changera l'état pour signaler que la souris est au-dessus du bouton, tandis que EVMouseOut indiquera que la souris n'est plus au-dessus du bouton. Nous afficherons ensuite l'état actuel sous le composant Enfant à l'aide d'une interpolation. En suivant ce tutoriel, vous apprendrez à transmettre et gérer des événements DOM d'un composant à un autre dans une application Svelte.

Objectifs de cette leçon

À l'issue de cette vidéo, vous saurez comment :
- Transmettre des événements DOM entre composants Svelte.
- Implémenter et gérer des custom events dans un projet Svelte.
- Mettre à jour et afficher des variables d'état en réponse aux événements DOM.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé de :
- Avoir des notions de base en JavaScript.
- Connaître les fondamentaux de Svelte.
- Avoir déjà utilisé des événements DOM simples.

Métiers concernés

Les compétences abordées dans cette vidéo sont pertinentes pour :
- Les développeurs front-end.
- Les ingénieurs logiciel.
- Les développeurs d'applications web interactives.

Alternatives et ressources

En alternative, vous pourriez utiliser des frameworks comme React ou Vue.js pour gérer des événements DOM, bien que les méthodes spécifiques diffèrent légèrement.

Questions & Réponses

En utilisant des custom events, le composant Enfant peut émettre des événements DOM que le composant Parent peut écouter et traiter.
Le composant Enfant transmet des événements OnClick, OnMouseEnter et OnMouseOut.
La fonction EVMouseEnter est exécutée pour mettre à jour l'état indiquant que la souris est au-dessus du bouton.