Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Introduction aux Événements et aux Écouteurs d'Événements | Gestion des Événements et Interactions Utilisateur en JavaScript
Maîtrise Avancée de JavaScript

bookIntroduction aux Événements et aux Écouteurs d'Événements

Que sont les événements en JavaScript ?

JavaScript fournit des mécanismes pour gérer ces événements et exécuter du code spécifique en réponse, rendant ainsi votre application web interactive et dynamique.

Types d'événements courants

Explication de addEventListener() et comment attacher des écouteurs d'événements

Pour réagir aux événements en JavaScript, il faut attacher un écouteur d'événement à un élément. La méthode la plus courante pour cela est la fonction addEventListener(), qui écoute des événements spécifiques et appelle une fonction lorsque l'événement se produit.

element.addEventListener('event', function, useCapture);
  • event : Le type d'événement à écouter (par exemple, 'click', 'submit') ;
  • function : La fonction de rappel à exécuter lorsque l'événement est déclenché ;
  • useCapture (optionnel) : Un booléen indiquant si l'événement doit être capturé lors de la phase de capture ou de bouillonnement (la valeur par défaut est false, ce qui signifie qu'il écoute pendant la phase de bouillonnement).

Écouteur d'événement de clic

Ajout d'un écouteur d'événement click au bouton. Lorsqu'il est cliqué, il déclenche une alerte.

index.html

index.html

index.css

index.css

index.js

index.js

copy

L'écouteur d'événement est attaché à l'élément #myButton, et lorsqu'un utilisateur clique sur le bouton, une boîte de dialogue apparaît avec le texte "Button clicked!"

Écouteur d'événement de soumission

Ajout d'un écouteur d'événement pour l'événement submit, empêchant le comportement par défaut d'envoi du formulaire afin de traiter les données avec JavaScript.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Un écouteur d'événement sur l'événement submit du formulaire empêche la soumission par défaut avec event.preventDefault(), permettant ainsi au JavaScript personnalisé de gérer les données. Lors de la soumission, le nom saisi est récupéré et affiché dans un paragraphe avec l'ID displayName.

Événement Keypress

Ajout d'un écouteur d'événement keypress au champ de saisie. Lorsqu'une touche est pressée, elle s'affiche dans le paragraphe.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Chaque fois qu'une touche est enfoncée lors de la saisie dans le champ de saisie, la touche pressée est enregistrée dans la console.

Exemple pratique : Gestion de la validation de formulaire lors de la soumission

Création d'une logique pour la validation du formulaire avant la soumission du formulaire.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Le gestionnaire d'événement submit garantit que le formulaire ne se soumet pas si les champs obligatoires sont vides. Si le champ nom d'utilisateur ou mot de passe est vide, l'événement est empêché de se poursuivre et un message d'erreur s'affiche.

1. Quel est le but de addEventListener() ?

2. Lequel des éléments suivants N'EST PAS un type d'événement valide pour addEventListener() ?

question mark

Quel est le but de addEventListener() ?

Select the correct answer

question mark

Lequel des éléments suivants N'EST PAS un type d'événement valide pour addEventListener() ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 1

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

Suggested prompts:

What are some other common event types in JavaScript?

Can you explain how event propagation works?

How do I remove an event listener in JavaScript?

Awesome!

Completion rate improved to 2.22

bookIntroduction aux Événements et aux Écouteurs d'Événements

Glissez pour afficher le menu

Que sont les événements en JavaScript ?

JavaScript fournit des mécanismes pour gérer ces événements et exécuter du code spécifique en réponse, rendant ainsi votre application web interactive et dynamique.

Types d'événements courants

Explication de addEventListener() et comment attacher des écouteurs d'événements

Pour réagir aux événements en JavaScript, il faut attacher un écouteur d'événement à un élément. La méthode la plus courante pour cela est la fonction addEventListener(), qui écoute des événements spécifiques et appelle une fonction lorsque l'événement se produit.

element.addEventListener('event', function, useCapture);
  • event : Le type d'événement à écouter (par exemple, 'click', 'submit') ;
  • function : La fonction de rappel à exécuter lorsque l'événement est déclenché ;
  • useCapture (optionnel) : Un booléen indiquant si l'événement doit être capturé lors de la phase de capture ou de bouillonnement (la valeur par défaut est false, ce qui signifie qu'il écoute pendant la phase de bouillonnement).

Écouteur d'événement de clic

Ajout d'un écouteur d'événement click au bouton. Lorsqu'il est cliqué, il déclenche une alerte.

index.html

index.html

index.css

index.css

index.js

index.js

copy

L'écouteur d'événement est attaché à l'élément #myButton, et lorsqu'un utilisateur clique sur le bouton, une boîte de dialogue apparaît avec le texte "Button clicked!"

Écouteur d'événement de soumission

Ajout d'un écouteur d'événement pour l'événement submit, empêchant le comportement par défaut d'envoi du formulaire afin de traiter les données avec JavaScript.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Un écouteur d'événement sur l'événement submit du formulaire empêche la soumission par défaut avec event.preventDefault(), permettant ainsi au JavaScript personnalisé de gérer les données. Lors de la soumission, le nom saisi est récupéré et affiché dans un paragraphe avec l'ID displayName.

Événement Keypress

Ajout d'un écouteur d'événement keypress au champ de saisie. Lorsqu'une touche est pressée, elle s'affiche dans le paragraphe.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Chaque fois qu'une touche est enfoncée lors de la saisie dans le champ de saisie, la touche pressée est enregistrée dans la console.

Exemple pratique : Gestion de la validation de formulaire lors de la soumission

Création d'une logique pour la validation du formulaire avant la soumission du formulaire.

index.html

index.html

index.css

index.css

index.js

index.js

copy

Le gestionnaire d'événement submit garantit que le formulaire ne se soumet pas si les champs obligatoires sont vides. Si le champ nom d'utilisateur ou mot de passe est vide, l'événement est empêché de se poursuivre et un message d'erreur s'affiche.

1. Quel est le but de addEventListener() ?

2. Lequel des éléments suivants N'EST PAS un type d'événement valide pour addEventListener() ?

question mark

Quel est le but de addEventListener() ?

Select the correct answer

question mark

Lequel des éléments suivants N'EST PAS un type d'événement valide pour addEventListener() ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 1
some-alt