Qu'est-ce que l'apparition en JavaScript?

Mécanisme par lequel un événement initié sur un élément DOM se propage "vers le haut" dans la hiérarchie jusqu'à son élément parent, jusqu'à la racine (document). Par défaut, la plupart des événements passent par trois phases:

1. Phase de capture : L'événement descend du racine vers l'élément cible. Les écouteurs d'événements attachés avec l'option { capture: true } s'activent à cette étape.
2. Phase de cible : L'événement atteint l'élément cible où il a été initié. Les écouteurs attachés directement à cet élément s'activent.
3. Phase de bubbling : L'événement remonte de l'élément cible vers la racine du document. Les écouteurs d'événements attachés par défaut (sans { capture: true } ou avec { capture: false }) s'activent à cette étape. C'est la phase où se produit le "bubbling" au sens classique.

Le bubbling permet d'implémenter la délégation d'événements, où un seul écouteur sur un élément parent gère les événements de plusieurs éléments enfants.

Exemple:

// HTML:
// <div id="parent">
//   <button id="child">Clique-moi</button>
// </div>

const parent = document.getElementById('parent');
const child = document.getElementById('child');

parent.addEventListener('click', function() {
  console.log('L'événement a burbé jusqu'au parent');
});

child.addEventListener('click', function() {
  console.log('Événement sur l'élément cible (bouton)');
});

// Lors du clic sur le bouton 'child', la séquence de sortie sera:
// "Événement sur l'élément cible (bouton)"
// "L'événement a burbé jusqu'au parent"

La méthode event.stopPropagation() peut être utilisée pour arrêter la propagation supplémentaire de l'événement (que ce soit en capture ou en bubbling) après qu'il a été traité par l'écouteur actuel. La méthode event.stopImmediatePropagation() arrête le bubbling et empêche d'autres écouteurs sur le même élément de s'activer. event.preventDefault() empêche l'action par défaut du navigateur liée à l'événement, mais n'arrête pas sa propagation.