Cos'è il pop-up in JavaScript?

Meccanismo mediante il quale un evento, innescato su un elemento DOM, si propaga "verso l'alto" attraverso la gerarchia fino al suo elemento genitore, fino al nodo radice (document). Per impostazione predefinita, la maggior parte degli eventi attraversa tre fasi:

1. Fase di cattura: L'evento si muove dall'alto verso il basso dal nodo radice all'elemento target. Gli ascoltatori di eventi allegati con l'opzione { capture: true } si attivano in questa fase.
2. Fase di destinazione: L'evento raggiunge l'elemento target in cui è stato innescato. Gli ascoltatori allegati direttamente a questo elemento si attivano.
3. Fase di bubbling: L'evento si muove verso l'alto dall'elemento target fino al nodo radice del documento. Gli ascoltatori di eventi allegati per impostazione predefinita (senza { capture: true } o con { capture: false }) si attivano in questa fase. Questa è la fase in cui avviene il "bubbling" nel senso classico.

Il bubbling consente di implementare la delegazione degli eventi, in cui un singolo ascoltatore su un elemento genitore gestisce gli eventi di più elementi figli.

Esempio:

// HTML:
// <div id="parent">
//   <button id="child">Cliccami</button>
// </div>

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

parent.addEventListener('click', function() {
  console.log('L'evento è balzato fino al genitore');
});

child.addEventListener('click', function() {
  console.log('Evento sull'elemento target (pulsante)');
});

// Cliccando sul pulsante 'child', la sequenza di output sarà:
// "Evento sull'elemento target (pulsante)"
// "L'evento è balzato fino al genitore"

Il metodo event.stopPropagation() può essere usato per fermare la propagazione ulteriore dell'evento (sia in cattura che in bubbling) dopo che è stato gestito dall'attuale ascoltatore. Il metodo event.stopImmediatePropagation() ferma il bubbling e impedisce ad altri ascoltatori sullo stesso elemento di attivarsi. event.preventDefault() previene l'azione predefinita del browser associata all'evento, ma non ne ferma la propagazione.