CATALOGUE Code & Data Apprendre Svelte 3 et SvelteKit 1.0 Gestion des Événements en JavaScript avec Svelte

Gestion des Événements en JavaScript avec Svelte

Gestion événementielle de la souris
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

Les objectifs de cette vidéo sont :
- Comprendre comment capturer des événements de la souris en Svelte.
- Apprendre à accéder aux propriétés de l'objet event.
- Savoir afficher dynamiquement des données en utilisant Svelte.

Découvrez comment utiliser des fonctions événementielles en Svelte pour capturer et afficher les coordonnées x et y du pointeur de la souris sur une image.

Cette leçon vous montre comment utiliser Svelte pour capturer un événement mouseMove et afficher les coordonnées du pointeur de la souris sur une image. Vous allez apprendre à définir une fonction événementielle qui utilise l'objet event pour récupérer les propriétés offsetX et offsetY de la souris. La vidéo illustre comment afficher ces coordonnées dynamiquement au-dessus d'une image spécifiée dans les assets. À la fin de cette leçon, vous saurez comment manipuler les événements souris de manière efficace sans passer explicitement l'objet event à la fonction.

Dans la mise en œuvre, vous verrez comment initialiser une variable Svelte pour stocker les coordonnées et comment utiliser l'interpolation pour les afficher en temps réel.

Voir plus
Questions réponses
Pourquoi n'est-il pas nécessaire de passer l'objet event à la fonction en Svelte ?
Parce que Svelte récupère automatiquement l'objet event dans les arguments de la fonction événementielle.
Quelles sont les deux propriétés de l'objet event utilisées pour obtenir les coordonnées de la souris ?
Les propriétés sont offsetX et offsetY.
Que se passe-t-il quand la souris se trouve dans l'angle supérieur gauche de l'image ?
Les coordonnées affichées seront 0,0.

Programme détaillé