Bouillonnement et capture d'événements JavaScript
Maîtriser le bouillonnement et la capture d'événements en JavaScript
Le bouillonnement et la capture sont deux phases du modèle de propagation des événements qui se produit lorsque des événements sont déclenchés dans le Document Object Model (DOM). Comprendre ces concepts est crucial pour gérer efficacement les événements dans des applications web complexes. Ce guide expliquera ces concepts et fournira des exemples pratiques pour démontrer leur fonctionnement.
Comprendre le bouillonnement et la capture d'événements
Propagation des événements
La propagation des événements dans le DOM se déroule en trois phases :
- Phase de capture : L'événement part du sommet de l'arbre DOM (objet document) et se propage vers l'élément cible.
- Phase cible : L'événement atteint l'élément cible.
- Phase de bouillonnement : Après avoir atteint la cible, l'événement remonte de l'élément cible vers le document.
Par défaut, la plupart des événements en JavaScript se propagent lors de la phase de bouillonnement, sauf indication contraire.
Bouillonnement des événements
Lors de la phase de bouillonnement, un événement commence à l'élément le plus spécifique (le point le plus profond dans la structure du document) puis remonte vers le nœud le moins spécifique (objet document). C'est le comportement par défaut pour la plupart des événements.
Exemple de bouillonnement d'événement :
<div onclick="alert('You clicked the DIV!');">
Click me or one of my children:
<p onclick="alert('You clicked the P!');">Click me!</p>
</div>Si vous cliquez sur l'élément <p>, vous verrez d'abord l'alerte pour l'élément <p>, puis une alerte pour l'élément <div> lorsque l'événement remonte.
Capture d'événements
La capture est la première phase du modèle de propagation des événements, où l'événement descend jusqu'à l'élément cible. Elle n'est pas couramment utilisée, mais peut être utile pour gérer les événements avant qu'ils n'atteignent une cible.
Pour écouter les événements lors de la phase de capture, vous définissez le troisième argument de addEventListener sur true :
<div id="outer" onclick="alert('Clicked the DIV!');">
Click me or one of my children:
<p id="inner" onclick="alert('Clicked the P!');">Click me!</p>
</div>
<script>
document.getElementById('outer').addEventListener('click', function() {
alert('Captured the click on DIV!');
}, true); // Set to true to handle in the capturing phase
document.getElementById('inner').addEventListener('click', function() {
alert('Captured the click on P!');
}, true);
</script>Si vous cliquez sur l'élément <p>, vous verrez d'abord les alertes de capture pour <div> et <p>, avant les alertes de bouillonnement habituelles.
Exemples pratiques de bouillonnement et de capture d'événements
Exemple 1 : Empêcher le bouillonnement des événements
Parfois, vous souhaiterez empêcher un événement de remonter dans l'arbre DOM :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Event Propagation Example</title>
<style>
.container {
width: 200px;
height: 200px;
background-color: lightblue;
padding: 20px;
}
.box {
width: 100px;
height: 100px;
background-color: pink;
margin-top: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container" onclick="alert('You clicked the container!');">
Click the pink box to see event propagation:
<div class="box" onclick="event.stopPropagation(); alert('You clicked the box without bubbling!');"></div>
</div>
</body>
</html>Dans cet exemple, il y a un conteneur avec un fond bleu clair contenant une boîte rose. Cliquer n'importe où à l'intérieur du conteneur déclenche une alerte indiquant « Vous avez cliqué sur le conteneur ! ». Cependant, cliquer sur la boîte rose déclenche une alerte différente indiquant « Vous avez cliqué sur la boîte sans bouillonnement ! » car event.stopPropagation() empêche l'événement de clic de remonter jusqu'au conteneur.
Exemple 2 : Utiliser à la fois le bouillonnement et la capture
Cet exemple montre comment gérer un événement à la fois lors des phases de capture et de bouillonnement :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Event Capture and Bubbling Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
#outerContainer {
border: 2px solid #ccc;
padding: 20px;
margin-bottom: 20px;
background-color: #f9f9f9;
border-radius: 10px;
}
#innerElement {
background-color: #ffa8a8;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="outerContainer" onclick="alert('Event Bubbled from Outer Container');">
<p style="margin: 0;">Click anywhere in this outer container:</p>
<p id="innerElement">Click me!</p>
</div>
<script>
// Event listener attached to the outer container during the capturing phase
document.getElementById('outerContainer').addEventListener('click', function() {
alert('Event Captured by Outer Container');
}, true);
// Event listener attached to the inner element during the bubbling phase
document.getElementById('innerElement').addEventListener('click', function() {
alert('Event Bubbled from Inner Element');
}, false);
</script>
</body>
</html>Conteneur extérieur (
#outerContainer) : Imaginez-le comme la plus grande boîte. Il contient du texte indiquant « Cliquez n'importe où dans ce conteneur extérieur : ». À l'intérieur de cette boîte, il y en a une autre plus petite.- Élément intérieur (
#innerElement) : Il s'agit de la plus petite boîte à l'intérieur de la plus grande. Elle contient le texte « Cliquez-moi ! ». Cette boîte se trouve à l'intérieur du conteneur extérieur.
- Élément intérieur (
Écouteurs d'événements :
- Capture d'événement : Lorsque vous cliquez n'importe où sur le conteneur extérieur, cela déclenche d'abord une alerte indiquant « Événement capturé par le conteneur extérieur ». C'est comme si quelqu'un attrapait l'événement dès qu'il entre dans le conteneur extérieur.
- Bouillonnement d'événement : Si vous cliquez sur la boîte intérieure (« Cliquez-moi ! »), l'événement remonte. C'est comme une bulle qui s'élève de la boîte intérieure vers le conteneur extérieur. Lorsqu'elle atteint le conteneur extérieur, elle déclenche une autre alerte indiquant « Événement remonté depuis l'élément intérieur ».
Ainsi, le conteneur extérieur capture l'événement lorsque vous cliquez n'importe où dessus, et si vous cliquez sur la boîte intérieure, l'événement remonte jusqu'au conteneur extérieur. C'est ainsi que fonctionnent la capture et le bouillonnement des événements en HTML !
Conclusion
Comprendre le bouillonnement et la capture des événements vous permet de contrôler efficacement la propagation des événements dans vos applications web. En gérant la manière dont les événements sont traités via ces phases, vous pouvez améliorer l'interactivité de votre application, empêcher la propagation indésirable des événements et vous assurer que les événements sont gérés selon vos besoins spécifiques.
Pratique
Quelles sont les deux phases de propagation des événements mentionnées dans l'URL fournie ?