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

Optimisation des gestionnaires d'événements DOM avec des modificateurs

Retour à la formation
Chapitre 3 Leçon 7
Précédent
Suivant

Apprenez à ajouter des modificateurs aux gestionnaires d'événements du DOM pour modifier leur comportement.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous allons explorer comment ajouter des modificateurs aux gestionnaires d'événements du DOM afin de modifier leur comportement de manière optimisée. Les modificateurs disponibles incluent :

  • PreventDefault : Appelle Event.PreventDefault avant d'exécuter la fonction événementielle.
  • StopPropagation : Appelle Event.StopPropagation pour éviter la propagation de l'événement.
  • Passive : Améliore le scrolling pour les événements liés à la roulette de la souris ou aux écrans tactiles.
  • Non Passive : Désactive le mode passif.
  • Capture : Propage les événements vers les enfants au lieu des parents (capturing).
  • Once : Exécute le gestionnaire une seule fois.
  • Self : Exécute le gestionnaire uniquement si Event.Target est égal à l'élément déclencheur.
  • Trusted : Exécute le gestionnaire si Event.Trusted vaut true (événement déclenché par l'utilisateur).

Nous illustrerons également ces concepts avec un exercice pratique de formulaire, où nous ajouterons un bouton submit pour calculer le carré d'un nombre sans changer de page, grâce au modificateur preventDefault.

Objectifs de cette leçon

Comprendre et utiliser les modificateurs des gestionnaires d'événements DOM pour contrôler les interactions utilisateur.

Prérequis pour cette leçon

Connaissance de base du DOM et des événements en JavaScript.

Métiers concernés

Développeur web, Ingénieur logiciel, Spécialiste en interfaces utilisateur.

Alternatives et ressources

Utilisation de bibliothèques JavaScript comme jQuery ou React pour la gestion des événements.

Questions & Réponses

Le modificateur PreventDefault appelle Event.PreventDefault avant d'exécuter la fonction événementielle pour empêcher l'action par défaut du navigateur.
StopPropagation empêche l'événement de se propager aux parents, tandis que Capture permet de propager les événements aux enfants (capturing).
Le modificateur Once permet au gestionnaire d'événements de s'exécuter une seule fois, après quoi il est automatiquement supprimé.