Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Apprendre Événements Clavier et Souris | Événements et Gestion des Événements
Maîtrise Avancée de JavaScript
course content

Contenu du cours

Maîtrise Avancée de JavaScript

Maîtrise Avancée de JavaScript

1. Classes
Bienvenue dans le CoursDéclaration de ClasseDéfi : Construire une ClasseMéthodes de ClasseDéfi : Ajouter des Méthodes à une ClasseObjet ParamètrePropriétés PrivéesDéfi : Implémentation de Propriétés Privées dans une ClasseAccesseurs et MutateursDéfi : Gestion des Propriétés avec Getters et SettersPropriétés StatiquesMéthodes StatiquesDéfi : Utilisation des Propriétés et Méthodes Statiques dans une ClasseHéritage avec Extends et Utilisation de super()Défi : Héritage de Classe avec Extends et Utilisation de Super
2. Manipulation du DOM
Qu'est-ce Que le DOM?Interroger le DOMDéfi : Interroger le DOMComprendre la Hiérarchie du DOMDéfi : Hiérarchie DOMPropriétés Du DOMTravailler Avec les Attributs des ÉlémentsDéfi : Travailler Avec les Propriétés et Attributs des ÉlémentsAjouter des ÉlémentsSuppression des ÉlémentsDéfi : Ajouter et Supprimer des ÉlémentsModifier les Styles des ÉlémentsDéfi : Modifier les Styles des Éléments
3. Événements et Gestion des Événements
Introduction aux Événements et aux Écouteurs d'ÉvénementsL'Objet ÉvénementDéfi : Événements et Écouteurs d'ÉvénementsPropagation et Délégation d'ÉvénementsDéfi : Propagation et Délégation d'ÉvénementsÉvénements Clavier et SourisGestion des Écouteurs d'Événements
4. JavaScript Asynchrone et APIs
Introduction à JavaScript AsynchroneRappelsPromessesAsync/AwaitTravailler Avec les APIsIntégration Pratique de l'APIDéfi : Travailler Avec l'APITravailler avec des Bibliothèques TiercesDéfi : Travailler Avec des Bibliothèques TiercesGestion de Plusieurs Requêtes Asynchrones

book
Événements Clavier et Souris

Les événements clavier et souris permettent aux développeurs de capturer et de répondre aux interactions des utilisateurs. En gérant efficacement les entrées utilisateur, vous pouvez fournir des retours, exécuter des actions spécifiques ou améliorer l'expérience utilisateur globale.

Événements Clavier

Les événements clavier sont déclenchés lorsque les utilisateurs interagissent avec le clavier. Il existe deux principaux événements clavier :

Dans un éditeur de texte ou tout formulaire où les utilisateurs tapent, il est courant de capturer certaines combinaisons de touches (par exemple, Ctrl + S pour enregistrer, ou Ctrl + Z pour annuler). Créons un exemple où des touches spécifiques sont enregistrées pour simuler la détection de raccourcis dans un formulaire.

html

index.html

css

index.css

js

index.js

copy

Dans cet exemple, les utilisateurs tapent dans un champ de saisie, et le script capture les raccourcis clavier courants comme Ctrl + S pour enregistrer ou Ctrl + Z pour annuler une action.

Gestion des événements de la souris

Les événements de la souris sont déclenchés lorsque les utilisateurs interagissent avec leur souris ou un pavé tactile. Les événements de la souris les plus couramment utilisés sont :

Créons un exemple où une info-bulle s'affiche lorsque la souris survole un bouton.

html

index.html

css

index.css

js

index.js

copy

Offrir des informations contextuelles rapides sans encombrer l'interface est un cas d'utilisation courant, améliorant l'utilisabilité et guidant les utilisateurs à travers des interfaces complexes.

Exemple Pratique : Double-clic pour Éditer avec Action de Sauvegarde

Dans de nombreuses applications web modernes, les utilisateurs peuvent double-cliquer pour éditer un élément (comme renommer un fichier ou mettre à jour une tâche) et enregistrer leurs modifications.

html

index.html

css

index.css

js

index.js

copy

Dans cet exemple, initialement, un paragraphe affiche la tâche, qui devient éditable lorsqu'on double-clique, montrant un champ de saisie et un bouton "Enregistrer". L'utilisateur peut modifier la tâche et cliquer sur "Enregistrer" pour appliquer les modifications ; cette configuration évite les changements accidentels dus à des clics simples. Après l'enregistrement, un message de statut apparaît pour confirmer la mise à jour ou afficher une erreur si l'entrée est vide.

1. Que fait l'événement keydown ?

2. Quel événement de la souris est déclenché lorsque le pointeur entre dans la zone d'un élément ?

Que fait l'événement `keydown` ?

Que fait l'événement keydown ?

Sélectionnez la réponse correcte

Quel événement de la souris est déclenché lorsque le pointeur entre dans la zone d'un élément ?

Quel événement de la souris est déclenché lorsque le pointeur entre dans la zone d'un élément ?

Sélectionnez la réponse correcte

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 6
We're sorry to hear that something went wrong. What happened?
some-alt