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

bookTravail Avec les Événements Clavier et Souris

Les événements clavier et souris permettent aux développeurs de capturer et de réagir aux interactions des utilisateurs. En gérant efficacement les entrées utilisateur, il est possible de fournir des retours, d'exécuter des actions spécifiques ou d'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 saisissent du texte, il est courant de capturer certaines combinaisons de touches (par exemple, Ctrl + S pour enregistrer, ou Ctrl + Z pour annuler). Voici un exemple où des touches spécifiques sont enregistrées afin de simuler la détection de raccourcis dans un formulaire.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Dans cet exemple, l'utilisateur saisit du texte dans un champ de saisie, et le script capture les raccourcis clavier courants tels que 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 l'utilisateur interagit avec sa souris ou un pavé tactile. Les événements de souris les plus couramment utilisés sont :

Création d’un exemple où une info-bulle s’affiche lors du survol de la souris sur un bouton.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Fourniture d’informations contextuelles rapides sans encombrer l’interface, cas d’utilisation courant, amélioration de l’utilisabilité et orientation des utilisateurs dans 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 modifier un élément (comme renommer un fichier ou mettre à jour une tâche) et enregistrer leurs modifications.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Dans cet exemple, un paragraphe affiche initialement la tâche, qui devient modifiable lors d'un double-clic, affichant un champ de saisie et un bouton « Enregistrer ». L'utilisateur peut modifier la tâche et cliquer sur « Enregistrer » pour appliquer les changements ; cette configuration évite les modifications accidentelles dues à un simple clic. Après l'enregistrement, un message de statut apparaît pour confirmer la mise à jour ou afficher une erreur si le champ est vide.

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

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

question mark

Que fait l’événement keydown ?

Select the correct answer

question mark

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

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 6

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Awesome!

Completion rate improved to 2.22

bookTravail Avec les Événements Clavier et Souris

Glissez pour afficher le menu

Les événements clavier et souris permettent aux développeurs de capturer et de réagir aux interactions des utilisateurs. En gérant efficacement les entrées utilisateur, il est possible de fournir des retours, d'exécuter des actions spécifiques ou d'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 saisissent du texte, il est courant de capturer certaines combinaisons de touches (par exemple, Ctrl + S pour enregistrer, ou Ctrl + Z pour annuler). Voici un exemple où des touches spécifiques sont enregistrées afin de simuler la détection de raccourcis dans un formulaire.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Dans cet exemple, l'utilisateur saisit du texte dans un champ de saisie, et le script capture les raccourcis clavier courants tels que 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 l'utilisateur interagit avec sa souris ou un pavé tactile. Les événements de souris les plus couramment utilisés sont :

Création d’un exemple où une info-bulle s’affiche lors du survol de la souris sur un bouton.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Fourniture d’informations contextuelles rapides sans encombrer l’interface, cas d’utilisation courant, amélioration de l’utilisabilité et orientation des utilisateurs dans 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 modifier un élément (comme renommer un fichier ou mettre à jour une tâche) et enregistrer leurs modifications.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Dans cet exemple, un paragraphe affiche initialement la tâche, qui devient modifiable lors d'un double-clic, affichant un champ de saisie et un bouton « Enregistrer ». L'utilisateur peut modifier la tâche et cliquer sur « Enregistrer » pour appliquer les changements ; cette configuration évite les modifications accidentelles dues à un simple clic. Après l'enregistrement, un message de statut apparaît pour confirmer la mise à jour ou afficher une erreur si le champ est vide.

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

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

question mark

Que fait l’événement keydown ?

Select the correct answer

question mark

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

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 6
some-alt