Les événements dans JavaScript agissent comme des notifications indiquant qu’une interaction utilisateur ou une autre action a eu lieu. Par exemple, lorsque vous cliquez sur un bouton de formulaire, votre navigateur génère un événement pour indiquer que cela s’est produit. La saisie dans un champ de recherche déclenche également des événements et c’est ainsi que la suggestion automatique fonctionne souvent en ligne.
En JavaScript, les événements impliquant une interaction avec l’utilisateur se déclenchent généralement contre des éléments spécifiques. Par exemple, cliquer sur un bouton déclenche un événement sur ce bouton. Mais les événements se propagent également : ils se déclenchent contre d’autres éléments de la hiérarchie du document.
Lisez la suite pour tout savoir sur la propagation d’événements et les deux types distincts disponibles.
Qu’est-ce que la gestion des événements en JavaScript ?
Vous pouvez utiliser du code JavaScript pour détecter et répondre aux événements déclenchés par une page Web. Vous pouvez le faire pour remplacer le comportement par défaut ou prendre des mesures lorsqu’aucune valeur par défaut n’existe. Un exemple courant est la validation de formulaire. La gestion des événements vous permet d’interrompre le processus normal de soumission du formulaire.
Considérez cet exemple :
<div>
<button id="button">Click Me</button>
</div><script>
const button = document.getElementById("button");
button.addEventListener("click", ()=>
alert("Hello World");
);
</script>
Le code ci-dessus a un élément button avec un identifiant nommé button. Il a un écouteur d’événement de clic qui affiche une alerte avec le message Bonjour le monde.
Qu’est-ce que la propagation d’événements ?
La propagation des événements décrit l’ordre dans lequel les événements parcourent l’arborescence DOM lorsque le navigateur Web les déclenche.
Supposons qu’il y ait une balise form à l’intérieur d’une balise div et que les deux aient des écouteurs d’événement onclick. La propagation d’événements décrit comment un écouteur d’événement peut se déclencher après l’autre.
Il existe deux types de propagation :
- Le bouillonnement d’événements, par lequel les événements montent en flèche, de l’enfant au parent.
- Capture d’événements, par laquelle les événements se déplacent vers le bas, du parent à l’enfant.
Qu’est-ce que le bouillonnement d’événements en JavaScript ?
Le bouillonnement d’événements signifie que la direction de propagation de l’événement ira de l’élément enfant à son élément parent.
Considérez l’exemple suivant. Il a trois éléments imbriqués : div, form et button. Chaque élément a un Cliquez sur écouteur d’événement. Le navigateur affiche un alerte avec un message lorsque vous cliquez sur chaque élément.
Par défaut, l’ordre dans lequel le navigateur Web affiche les alertes sera button, form, puis div. Les événements se succèdent d’enfant en parent.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event propagation example</title>
</head>
<body>
<div id="div" style="background:#22577E; color:white">
div
<form id="form" style="background:#5584AC; color:white">
form <br/><br/>
<button id="button" style="background:#95D1CC; color:#22577E; border: solid 2px #22577E;
padding: 15px 40px;">
Button
</button>
</form>
</div>
<script>
const div = document.getElementById("div");
const form = document.getElementById("form");
const button = document.getElementById("button");div.addEventListener("click", ()=>
alert("div");
);
form.addEventListener("click", ()=>
alert("form")
);
button.addEventListener("click", ()=>
alert("button")
);
</script>
</body>
</html>
Qu’est-ce que la capture d’événements ?
Avec la capture d’événements, l’ordre de propagation est à l’opposé du bouillonnement. Sinon, le concept est identique. La seule différence avec la capture est que les événements se produisent du parent à l’enfant. Contrairement à l’exemple précédent, avec la capture d’événements, le navigateur affichera les alertes dans cet ordre : div, form et button.
Pour réaliser la capture d’événements, vous n’avez besoin d’apporter qu’une seule modification au code. Le deuxième paramètre de addEventListener() définit le type de propagation. Il est faux par défaut, pour représenter le bouillonnement. Pour activer la capture d’événements, vous devez définir le deuxième paramètre sur true.
div.addEventListener("click", ()=>
alert("div")
, true);
form.addEventListener("click", ()=>
alert("form")
, true);
button.addEventListener("click", ()=>
alert("button")
, true);
Comment pouvez-vous empêcher la propagation des événements ?
Vous pouvez arrêter la propagation des événements en utilisant le stopPropagation() méthode. le addEventListener() La méthode accepte un nom d’événement et une fonction de gestionnaire. Le gestionnaire prend un objet événement comme paramètre. Cet objet contient toutes les informations sur l’événement.
Lorsque vous invoquez le stopPropagation() méthode, l’événement cessera de se propager à partir de ce point. Par exemple, lorsque vous utilisez stopPropagation() sur l’élément de formulaire, les événements cesseront de bouillonner jusqu’au div. Si vous cliquez sur le bouton, vous verrez des événements déclenchés sur le bouton et le formulaire, mais pas le div.
form.addEventListener("click", (e)=>
e.stopPropagation();
alert("form");
);
JavaScript a beaucoup de pouvoir sous le capot
La gestion des événements de JavaScript est puissante, comparable à de nombreux langages d’interface complets. Lorsque vous développez des applications Web interactives, c’est une partie vitale de votre boîte à outils. Mais il y a beaucoup d’autres sujets avancés à saisir. Pour les développeurs JavaScript professionnels, il y a beaucoup à apprendre !
Si vous voulez apprendre à coder JavaScript comme un pro, consultez notre guide des doublures intelligentes et préparez-vous à impressionner lors de votre prochain entretien.
Lire la suite
A propos de l’auteur