JavaScript - Event Bubbling : Guide pour les débutants

Salut à toi, futurs magiciens JavaScript ! ? Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde de l'Event Bubbling. Ne t'inquiète pas si tu n'en as jamais entendu parler auparavant - à la fin de ce tutoriel, tu seras rempli de connaissances ! (As-tu compris ce que j'ai fait là ? ?)

Qu'est-ce que l'Event Bubbling ?

Imagine que tu es à une réunion de famille et que tu racontes une blague à ton cousin. Ton cousin rit, puis ta tante entend et se marre, puis tes grands-parents attrapent l'humour et commencent à rire. C'est un peu comme l'event bubbling dans JavaScript !

En termes techniques, l'event bubbling est une méthode de propagation des événements dans l'arbre DOM (Document Object Model) HTML. Lorsqu'un événement se produit sur un élément, il exécute d'abord les gestionnaires sur cet élément, puis sur son parent, et enfin sur tous les ancêtres.

Reprenons cela avec un exemple simple :

<div id="grandparent">
<div id="parent">
<button id="child">Clique-moi !</button>
</div>
</div>

document.getElementById('child').addEventListener('click', function() {
console.log('Enfant cliqué !');
});

document.getElementById('parent').addEventListener('click', function() {
console.log('Parent cliqué !');
});

document.getElementById('grandparent').addEventListener('click', function() {
console.log('Grands-parents cliqués !');
});

Si tu cliques sur le bouton, tu verras ceci dans la console :

Enfant cliqué !
Parent cliqué !
Grands-parents cliqués !

C'est l'event bubbling en action ! L'événement commence par le bouton (enfant), puis remonte jusqu'à son parent, et enfin aux grands-parents.

Étapes de l'Event Bubbling

Maintenant que nous comprenons le concept de base, analysons les étapes de l'event bubbling :

1. L'événement se produit sur l'élément le plus profond (l'élément cible).
2. Le gestionnaire d'événement sur l'élément cible s'exécute.
3. L'événement remonte à l'élément parent, et son gestionnaire d'événement s'exécute.
4. Cela continue jusqu'à ce qu'il atteigne l'objet document.

C'est comme un jeu de "passer le paquet" où chaque élément a une chance de gérer l'événement alors qu'il remonte dans l'arbre DOM.

Event Bubbling avec 2 DIV imbriquées

Regardons un exemple plus pratique avec deux div imbriquées :

<div id="outer" style="background-color: blue; padding: 20px;">
<div id="inner" style="background-color: red; padding: 20px;">
Clique-moi !
</div>
</div>

document.getElementById('outer').addEventListener('click', function() {
console.log('Div extérieure cliquée');
});

document.getElementById('inner').addEventListener('click', function() {
console.log('Div intérieure cliquée');
});

Lorsque tu cliques sur la div rouge intérieure, tu verras :

Div intérieure cliquée
Div extérieure cliquée

L'événement commence à la div intérieure et remonte à la div extérieure. C'est comme jeter une pierre dans un étang - les cercles se propagent du centre vers l'extérieur !

Event Bubbling avec 3 niveaux imbriqués

Maintenant, ajoutons un autre niveau à notre exemple :

<div id="grandparent" style="background-color: green; padding: 20px;">
<div id="parent" style="background-color: blue; padding: 20px;">
<div id="child" style="background-color: red; padding: 20px;">
Clique-moi !
</div>
</div>
</div>

document.getElementById('grandparent').addEventListener('click', function() {
console.log('Div grands-parents cliquée');
});

document.getElementById('parent').addEventListener('click', function() {
console.log('Div parents cliquée');
});

document.getElementById('child').addEventListener('click', function() {
console.log('Div enfant cliquée');
});

Maintenant, lorsque tu cliques sur la div rouge la plus intérieure, tu verras :

Div enfant cliquée
Div parents cliquée
Div grands-parents cliquée

C'est comme une hiérarchie familiale - le plus jeune parle en premier, puis les parents, et enfin les grands-parents !

Arrêter l'Event Bubbling

Parfois, tu peux vouloir arrêter ce comportement de remontée. Peut-être que tu ne veux pas que tes grands-parents entendent cette blague après tout ! En JavaScript, nous pouvons faire cela en utilisant la méthode stopPropagation() :

document.getElementById('child').addEventListener('click', function(event) {
console.log('Div enfant cliquée');
event.stopPropagation();
});

Maintenant, lorsque tu cliques sur la div enfant, tu ne verras que :

Div enfant cliquée

L'événement s'arrête là, comme mettre un bouchon dans une bouteille !

Méthodes utiles pour la gestion des événements

Voici un tableau des méthodes utiles pour la gestion des événements en JavaScript :

Méthode	Description
addEventListener()	Attache un gestionnaire d'événement à un élément
removeEventListener()	Supprime un gestionnaire d'événement d'un élément
event.stopPropagation()	Empêche l'événement de remonter dans l'arbre DOM
event.preventDefault()	Empêche l'action par défaut de l'événement
event.target	Retourne l'élément qui a déclenché l'événement
event.currentTarget	Retourne l'élément dont le gestionnaire d'événement a déclenché l'événement

Conclusion

Et voilà, les amis ! Nous avons exploré le concept de l'Event Bubbling en JavaScript. Souviens-toi, comprendre l'event bubbling est crucial pour gérer des événements complexes dans tes applications web. C'est comme comprendre les dynamiques familiales à une réunion - savoir qui entend quoi et quand peut te sauver de bien des confusions !

Pratique avec ces exemples, expérimente avec différentes structures imbriquées, et bientôt tu seras un pro de la gestion des événements. Bon codage, et puissent tes événements toujours remonter en douceur ! ?

Credits: Image by storyset