La gestion des événements est un concept important en JavaScript. Les événements permettent aux pages HTML d'être dynamiques et interactives, ce qui vous permet de créer des interfaces utilisateur attrayantes. Vous pouvez écrire du code pour exécuter JavaScript lorsqu'un événement se produit sur le DOM.
Un événement peut se produire lorsqu'un utilisateur clique sur un élément HTML, la page se charge ou lorsque la valeur d'un champ de saisie change. Vous pouvez écrire du code qui modifie la structure HTML lorsqu'un événement se produit. Découvrez trois manières différentes d'ajouter des écouteurs d'événement à votre code.
1. La méthode addEventListener
La méthode addEventListener est l'une des plus populaires méthodes d'écoute d'événement. Il a trois paramètres :
- Un objet représentant l'événement.
- Une fonction pour le gérer.
- Un booléen facultatif, useCapture, qui décrit comment l'événement se propage dans le DOM.
L'événement peut être n'importe quel événement DOM spécifié sur un élément cible. Une fonction est configurée pour répondre à cet événement lorsqu'il se produit.
La fonction peut être anonyme ou nommée. Les cibles courantes incluent un élément, ses enfants, un document et une fenêtre qui prend en charge un événement.
addEventListener() est une méthode recommandée pour administrer les écouteurs d'événements en JavaScript. Il fonctionne sur n'importe quelle cible d'événement, pas seulement sur les éléments HTML, et prend en charge plusieurs gestionnaires d'événements.
Vous voudrez peut-être exécuter du code sur le DOM. Vous pouvez imprimer du texte, effectuer des calculs ou afficher une image lorsqu'un utilisateur clique sur le bouton.
Illustrons avec le code suivant :
html>
<html>
<corps>
<h1>La méthode addEventListener avec des fonctionsh1>
<boutonidentifiant="monBtn">Cliquez icibouton>
<pidentifiant="démo">p>
corps>
html>Ensuite, ajoutez l'écouteur d'événement à l'aide du bouton .
constante élément = document.getElementById("monBtn");
élément.addEventListener("Cliquez sur", maFonction1);
fonctionmaFonction1() {
document.getElementById("démo").innerHTML += "Fonction exécutée! "
}
Lorsque vous cliquez sur le bouton, le texte "Fonction exécutée" s'imprime à l'écran, comme illustré ci-dessous.
2. Délégation d'événements à addEventListener
La délégation d'un événement en JavaScript est un modèle utilisé pour gérer plusieurs événements. Au lieu d'ajouter un écouteur d'événement à chaque élément, vous ajoutez uniquement l'écouteur d'événement à un élément ancêtre. Vous pouvez accéder à l'élément qui a déclenché l'événement via le .cible propriété de l'objet événement.
Cela garantit que tous les éléments que vous ciblez ont un comportement partagé. Sans cela, vous devriez ajouter manuellement un écouteur d'événement à chacun.
Voici un exemple de délégation d'événement :
html>
<html>
<corps>
<h1> Délégation d'événement sur les boutonsh1>
<div>
<bouton>Bouton 1bouton>
<bouton>Bouton 2bouton>
<bouton>Bouton 3bouton>
div>
corps>
html>
Ensuite, ajoutez les écouteurs d'événements à tous les boutons avec seulement quelques lignes de code.
constante div = document.querySelector('div')div.addEventListener("Cliquez sur", (événement) => {
si (événement.target.tagName 'BOUTON') {
console.enregistrer("Bouton cliqué")
}
});
La délégation d'événements est un modèle basé sur le bouillonnement d'événements. Le bouillonnement d'événements se produit lorsqu'un élément reçoit un événement et le transmet à ses éléments parent et ancêtre dans le DOM. C'est un propagation d'événement concept qui se produit par défaut en JavaScript.
3. Utilisation de l'attribut onclick
Vous pouvez utiliser l'attribut onclick pour exécuter JavaScript lorsque les utilisateurs cliquent sur un élément. Comme la méthode addEventListener, vous pouvez utiliser la méthode onclick pour imprimer du texte, effectuer des calculs et modifier les caractéristiques des éléments sur les DOM.
Vous pouvez ajouter l'écouteur d'événements onclick en tant que gestionnaire d'événements en ligne à l'élément HTML. L'événement se produit lorsqu'un utilisateur clique sur l'élément. Changez dynamiquement la couleur du paragraphe suivant avec la méthode onclick :
html>
<html>
<corps>
<h1> Exécuter les événements onClickh1>
<pidentifiant="démo"sur clic="maFonction()">
Cliquez sur moi pour changer la couleur de mon texte.
p>
corps>
html>Dans le fichier JavaScript, ajoutez le code suivant :
fonctionmaFonction() {
document.getElementById("démo").style.color = "rouge";
}La sortie apparaîtra comme indiqué :
Pourquoi en savoir plus sur les écouteurs d'événements?
En tant que développeur JavaScript, vous utiliserez souvent des écouteurs d'événements dans des projets. Vous pouvez créer de nombreuses fonctionnalités avec des écouteurs d'événements, y compris des événements de propagation et de capture. La compréhension de ces concepts vous facilitera la création d'interfaces dynamiques sur vos applications.