CATALOGUE Code & Data Formation Svelte Apprendre Svelte 3 et SvelteKit 1.0 Optimisation des gestionnaires d'événements DOM avec des modificateurs

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

Les modificateurs d’événements (event modifiers)
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Svelte 3 et SvelteKit 1.0
Revoir le teaser Je m'abonne
Transcription
Cette leçon fait partie de la formation
129,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
Cette leçon fait partie de la formation
129,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Introduction aux modificateurs d'événements du DOM

Objectifs

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

Résumé

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

Description

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.

Voir plus

Questions fréquentes

Qu'est-ce que le modificateur PreventDefault fait ?
Le modificateur PreventDefault appelle Event.PreventDefault avant d'exécuter la fonction événementielle pour empêcher l'action par défaut du navigateur.
Quelle est la différence entre StopPropagation et Capture ?
StopPropagation empêche l'événement de se propager aux parents, tandis que Capture permet de propager les événements aux enfants (capturing).
Comment le modificateur Once change-t-il le comportement d'un gestionnaire d'événements ?
Le modificateur Once permet au gestionnaire d'événements de s'exécuter une seule fois, après quoi il est automatiquement supprimé.

Programme détaillé