Contenu du cours
Maîtrise Avancée de JavaScript
Maîtrise Avancée de JavaScript
L'Objet Événement
Chaque fois qu'un événement se produit en JavaScript, un objet event est automatiquement passé au gestionnaire d'événements. Cet objet contient des informations importantes sur l'événement, telles que l'élément qui l'a déclenché (target), le type d'événement (type), et des méthodes pour contrôler le comportement de l'événement, comme preventDefault() et stopPropagation().
Accéder aux Informations Liées à l'Événement
L'objet event contient plusieurs propriétés et méthodes utiles qui vous permettent d'accéder aux informations sur l'événement et d'interagir avec lui.
target
La propriété target fait référence à l'élément qui a déclenché l'événement. Elle nous aide à déterminer quel élément a été cliqué, survolé ou avec lequel on a interagi.
index.html
index.css
index.js
event.target est utilisé pour identifier le bouton spécifique qui a été cliqué, et son id est affiché dans le paragraphe avec l'ID display.
type
La propriété type fournit le type d'événement qui s'est produit (par exemple, click, submit, keydown).
index.html
index.css
index.js
Le event.type est affiché dans le paragraphe pour rétroaction, montrant qu'un événement click s'est produit. De plus, lorsque le bouton est cliqué, la couleur de fond de tout le corps est changée en lightblue.
Méthode preventDefault() dans l'objet Event
La méthode preventDefault() arrête le comportement par défaut d'un élément, comme empêcher un lien de naviguer ou empêcher un formulaire de se soumettre.
index.html
index.css
index.js
Ici, preventDefault() empêche l'action par défaut (naviguer vers une nouvelle page) lors du clic sur le lien. À la place, une alerte est affichée.
Exemple Pratique : Gestion de la Soumission de Formulaire et Utilisation de l'Objet Événement
Validons un formulaire, empêchons la soumission si les champs sont vides, et affichons les données du formulaire ainsi que les informations liées à l'événement comme le target, type, et comment preventDefault() empêche la soumission par défaut du formulaire.
index.html
index.css
index.js
Lorsque le formulaire "Sign Up" est soumis, un écouteur d'événements intercepte la soumission avec event.preventDefault(). Si le champ du nom d'utilisateur ou du mot de passe est vide, un message d'erreur s'affiche ; sinon, un message de succès apparaît, affichant le nom d'utilisateur soumis. De plus, des détails sur l'événement—tels que le type, l'ID du formulaire et si l'action par défaut a été empêchée—sont affichés dans une section dédiée. Le formulaire est ensuite réinitialisé pour une utilisation ultérieure.
1. Quelle information la propriété event.target fournit-elle ?
2. Pourquoi pourriez-vous utiliser event.preventDefault() dans un événement de soumission de formulaire ?
Merci pour vos commentaires !
