Introduction aux Événements et aux Écouteurs d'Événements
Qu'est-ce que les événements en JavaScript ?
JavaScript fournit des mécanismes pour gérer ces événements et exécuter un code spécifique en réponse, rendant votre application web interactive et dynamique.
Types d'événements courants
Explication de addEventListener() et comment attacher des écouteurs d'événements
Pour répondre aux événements en JavaScript, vous attachez un écouteur d'événement à un élément. La méthode la plus courante pour le faire est avec 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 que vous souhaitez écouter (par exemple,'click','submit');function: La fonction de rappel à exécuter lorsque l'événement est déclenché;useCapture(optionnel): Un booléen qui indique si l'événement doit être capturé pendant la phase de capture ou de propagation (par défaut, c'estfalse, ce qui signifie qu'il écoute pendant la phase de propagation).
Écouteur d'événement de clic
Attachons 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énements est attaché à l'élément #myButton, et lorsque l'utilisateur clique sur le bouton, une boîte de message apparaît avec le texte "Button clicked!"
Écouteur d'événement de soumission
Ajoutons un écouteur d'événements pour l'événement submit, empêchant le comportement par défaut de soumission du formulaire pour gérer les données avec JavaScript.
index.html
index.css
index.js
Un écouteur d'événements sur l'événement submit du formulaire empêche la soumission par défaut avec event.preventDefault(), permettant à JavaScript personnalisé de gérer les données à la place. Lors de la soumission, le nom saisi est récupéré et affiché dans un paragraphe avec l'ID displayName.
Événement Keypress
Attachons un écouteur d'événements keypress au champ de saisie. Lorsqu'une touche est enfoncée, elle sera affichée 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 enfoncée est enregistrée dans la console.
Exemple Pratique : Gestion de la Validation du Formulaire lors de la Soumission
Créons une logique pour la validation du formulaire avant la soumission du formulaire.
index.html
index.css
index.js
Le gestionnaire d'événements submit garantit que le formulaire ne se soumet pas si les champs requis sont vides. Si le champ du nom d'utilisateur ou du mot de passe est vide, l'événement est empêché de se poursuivre et un message d'erreur est affiché.
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
Posez-moi des questions sur ce sujet
Résumer ce chapitre
Afficher des exemples du monde réel
Awesome!
Completion rate improved to 2.22Introduction aux Événements et aux Écouteurs d'Événements
Glissez pour afficher le menu
Qu'est-ce que les événements en JavaScript ?
JavaScript fournit des mécanismes pour gérer ces événements et exécuter un code spécifique en réponse, rendant votre application web interactive et dynamique.
Types d'événements courants
Explication de addEventListener() et comment attacher des écouteurs d'événements
Pour répondre aux événements en JavaScript, vous attachez un écouteur d'événement à un élément. La méthode la plus courante pour le faire est avec 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 que vous souhaitez écouter (par exemple,'click','submit');function: La fonction de rappel à exécuter lorsque l'événement est déclenché;useCapture(optionnel): Un booléen qui indique si l'événement doit être capturé pendant la phase de capture ou de propagation (par défaut, c'estfalse, ce qui signifie qu'il écoute pendant la phase de propagation).
Écouteur d'événement de clic
Attachons 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énements est attaché à l'élément #myButton, et lorsque l'utilisateur clique sur le bouton, une boîte de message apparaît avec le texte "Button clicked!"
Écouteur d'événement de soumission
Ajoutons un écouteur d'événements pour l'événement submit, empêchant le comportement par défaut de soumission du formulaire pour gérer les données avec JavaScript.
index.html
index.css
index.js
Un écouteur d'événements sur l'événement submit du formulaire empêche la soumission par défaut avec event.preventDefault(), permettant à JavaScript personnalisé de gérer les données à la place. Lors de la soumission, le nom saisi est récupéré et affiché dans un paragraphe avec l'ID displayName.
Événement Keypress
Attachons un écouteur d'événements keypress au champ de saisie. Lorsqu'une touche est enfoncée, elle sera affichée 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 enfoncée est enregistrée dans la console.
Exemple Pratique : Gestion de la Validation du Formulaire lors de la Soumission
Créons une logique pour la validation du formulaire avant la soumission du formulaire.
index.html
index.css
index.js
Le gestionnaire d'événements submit garantit que le formulaire ne se soumet pas si les champs requis sont vides. Si le champ du nom d'utilisateur ou du mot de passe est vide, l'événement est empêché de se poursuivre et un message d'erreur est affiché.
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 !
