Introduction 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 estfalse, 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.css
index.js
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.css
index.js
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.css
index.js
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.css
index.js
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() ?
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
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.22Introduction 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 estfalse, 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.css
index.js
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.css
index.js
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.css
index.js
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.css
index.js
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() ?
Merci pour vos commentaires !
