7.1 Event Bubbling (Bubbling des événements)
En JavaScript, les événements qui se produisent dans un élément peuvent se propager à travers l'arborescence DOM. Ce processus s'appelle la propagation des événements et inclut deux principaux mécanismes : bubbling des événements (event bubbling) et capturing des événements (event capturing).
Mécanismes de propagation des événements :
- Event Bubbling (Bubbling des événements).
- Event Capturing (Capturing des événements).
Bubbling des événements — c'est un processus où un événement qui se produit dans un élément enfant se propage
progressivement vers le haut de la chaîne des parents jusqu'à l'élément racine (généralement document).
Explication :
- Quand le bouton
childest cliqué, le gestionnaire d'événement sur l'élémentchildest déclenché en premier (Child clicked) - Ensuite, l'événement se propage vers l'élément
parent, et son gestionnaire est déclenché (Parent clicked)
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="parent">
<button id="child">Click Me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function(event) {
console.log('Parent clicked');
});
child.addEventListener('click', function(event) {
console.log('Child clicked');
});
</script>
</body>
</html>
7.2 Event Capturing (Capturing des événements)
Capturing des événements — c'est un processus où un événement se propage d'abord de l'élément racine vers le bas de la chaîne des parents jusqu'à l'élément cible où l'événement s'est produit.
Pour utiliser le capturing des événements, vous devez définir le paramètre capture sur true lors de l'ajout du gestionnaire d'événements.
Explication :
-
Quand le bouton
childest cliqué, le gestionnaire d'événements sur l'élément parent (Parent clicked) est déclenché d'abord grâce à la définition du paramètrecapturesurtrue -
Ensuite, l'événement atteint l'élément cible
child, et son gestionnaire est déclenché (Child clicked)
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Event Capturing Example</title>
</head>
<body>
<div id="parent">
<button id="child">Click Me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function(event) {
console.log('Parent clicked');
}, true);
child.addEventListener('click', function(event) {
console.log('Child clicked');
});
</script>
</body>
</html>
7.3 Modèle en trois phases de la propagation des événements
Dans le processus de gestion des événements dans le DOM, il y a trois phases :
1. Phase de capturing (Phase de capture). L'événement se propage de l'élément racine (généralement document) vers le bas à travers la chaîne des parents jusqu'à l'élément cible.
2. Phase de cible (Phase cible). L'événement atteint l'élément cible où il s'est produit.
3. Phase de bubbling (Phase de bubbling). L'événement se propage de l'élément cible vers le haut à travers la chaîne des parents jusqu'à l'élément racine.
Contrôle de la propagation des événements
Il existe des méthodes pour contrôler la propagation des événements :
stopPropagation(). Arrête la propagation ultérieure de l'événement à la fois pendant le bubbling et le capturing.stopImmediatePropagation(). Arrête la propagation ultérieure de l'événement et empêche l'exécution d'autres gestionnaires d'événements sur l'élément actuel.preventDefault(). Annule l'action par défaut associée à l'événement (par exemple, l'envoi d'un formulaire lors de l'appui sur un bouton).
7.4 Exemple d'utilisation de stopPropagation
Explication :
- Quand le bouton
childest cliqué, le gestionnaire d'événement sur l'élémentchildest déclenché (Child clicked) - La propagation de l'événement est arrêtée avec
event.stopPropagation(), et le gestionnaire d'événement sur l'élément parent n'est pas déclenché
<!DOCTYPE html>
<html>
<head>
<title>Stop Propagation Example</title>
</head>
<body>
<div id="parent">
<button id="child">Click Me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function(event) {
console.log('Parent clicked');
});
child.addEventListener('click', function(event) {
console.log('Child clicked');
event.stopPropagation(); // Arrête la propagation de l'événement
});
</script>
</body>
</html>
GO TO FULL VERSION