Cosa sono bubbling e capturing degli eventi? Come si annulla la propagazione?

Il bubbling (bolla) e la cattura sono due fasi della propagazione degli eventi nel DOM.

• Cattura — l'evento passa inizialmente dalla radice del documento verso l'elemento target.
• Bubbling — dopo aver raggiunto l'elemento target, l'evento risale indietro lungo la gerarchia del DOM fino alla radice.

Per impostazione predefinita, i gestori di eventi vengono attivati nella fase di bubbling.

Per annullare il bubbling e impedire che l'evento si propaghi ulteriormente verso l'alto nel DOM, si utilizza il metodo event.stopPropagation().

Esempio:

button.addEventListener('click', function(event) {
  event.stopPropagation(); // Ferma il bubbling dell'evento
  console.log('Clic sul pulsante');
});