Le traitement 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 dans le DOM.
Un événement peut survenir lorsqu’un utilisateur clique sur un élément HTML, lorsque 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 façons différentes d’ajouter des écouteurs d’événements à votre code.
1. La méthode addEventListener
La méthode addEventListener est l’une des méthodes d’écoute d’événements les plus populaires. Elle possède trois paramètres :
- Un objet représentant l’événement.
- Une fonction pour le gérer.
- Un booléen optionnel, 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 habituelles comprennent un élément, ses enfants, un document et une fenêtre qui prend en charge un événement.
La fonction addEventListener() est une méthode recommandée pour administrer les écouteurs d’événements en JavaScript. Elle fonctionne sur n’importe quelle cible d’événement, pas seulement les éléments HTML, et prend en charge plusieurs gestionnaires d’événements.
Vous pouvez vouloir exécuter du code sur le DOM. Vous pouvez imprimer du texte, effectuer des calculs ou afficher une image lorsqu’un utilisateur clique sur un bouton.
Illustrons avec le code suivant :
<!DOCTYPE html>
<html>
<body>
<h1>The addEventListener Method With Functions</h1>
<button id="myBtn">Click Here</button>
<p id="demo"></p>
</body>
</html>
Ensuite, ajoutez l’écouteur d’événements en utilisant le bouton.
const element = document.getElementById("myBtn");
element.addEventListener("click", myFunction1);
function myFunction1() {
document.getElementById("demo").innerHTML += "Fuction executed! "
}
Lorsque vous cliquez sur le bouton, le texte ‘Function Executed’ s’affiche à l’écran, comme indiqué 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 la fonction .target de l’objet de l’événement.
Cela garantit que tous les éléments que vous ciblez ont un comportement commun. Sans cela, vous devriez ajouter manuellement un écouteur d’événement à chacun d’eux.
Voici un exemple de délégation d’événements :
<!DOCTYPE html>
<html>
<body>
<h1> Event Delegation on Buttons</h1>
<div>
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
</div>
</body>
</html>
Ensuite, ajoutez les écouteurs d’événements à tous les boutons avec seulement quelques lignes de code.
const div = document.querySelector('div')
div.addEventListener("click", (event) => {
if (event.target.tagName === 'BUTTON') {
console.log('Button clicked')
}
});
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 parents et ancêtres dans le DOM. Il s’agit d’un concept de propagation d’événements 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 du DOM.
Vous pouvez ajouter l’écouteur d’événement onclick comme un gestionnaire d’événement en ligne à l’élément HTML. L’événement se produit lorsqu’un utilisateur clique sur l’élément. Changez la couleur du paragraphe suivant de façon dynamique avec la méthode onclick :
<!DOCTYPE html>
<html>
<body>
<h1> Execute onClick Events</h1>
<p id="demo" onclick="myFunction()">
Click me to change my text color.
</p>
</body>
</html>
Dans le fichier JavaScript, ajoutez le code suivant :
function myFunction() {
document.getElementById("demo").style.color = "red";
}
La sortie apparaîtra comme indiqué :
Pourquoi se renseigner sur les récepteurs d’événements ?
En tant que développeur JavaScript, vous utiliserez souvent des écouteurs d’événements dans vos projets. Vous pouvez créer de nombreuses fonctionnalités avec les écouteurs d’événements, y compris le bullage et la capture d’événements. En comprenant ces concepts, il vous sera plus facile de créer des interfaces dynamiques dans vos applications.
