Was ist das Pop-up in JavaScript?

Mechanismus, bei dem ein auf einem DOM-Element ausgelöstes Ereignis "nach oben" durch die Hierarchie bis zu seinem Elternelement bis zum Wurzel (document) propagiert wird. Standardmäßig durchlaufen die meisten Ereignisse drei Phasen:

1. Capturing-Phase: Das Ereignis bewegt sich von der Wurzel nach unten zum Ziel-Element. Ereignis-Listener, die mit der Option { capture: true } angehängt sind, werden in dieser Phase ausgelöst.
2. Target-Phase: Das Ereignis erreicht das Ziel-Element, auf dem es ausgelöst wurde. Listener, die direkt an diesem Element angebracht sind, werden ausgelöst.
3. Bubbling-Phase: Das Ereignis bewegt sich vom Ziel-Element nach oben bis zur Wurzel des Dokuments. Standardmäßig angehängte Ereignis-Listener (ohne { capture: true } oder mit { capture: false }) werden in dieser Phase ausgelöst. Dies ist die Phase, in der das "Bubbling" im klassischen Sinne stattfindet.

Bubbling ermöglicht die Implementierung der Ereignisdelegation, bei der ein einzelner Listener am Elternelement Ereignisse von mehreren Kind-Elementen verarbeitet.

Beispiel:

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

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

parent.addEventListener('click', function() {
  console.log('Das Ereignis ist bis zum Elternteil gebubbelt');
});

child.addEventListener('click', function() {
  console.log('Ereignis auf dem Ziel-Element (Button)');
});

// Beim Klicken auf den Button 'child' wird die Ausgabesequenz:
// "Ereignis auf dem Ziel-Element (Button)"
// "Das Ereignis ist bis zum Elternteil gebubbelt"

Die Methode event.stopPropagation() kann verwendet werden, um die weitere Verbreitung des Ereignisses (sowohl in der Capture- als auch in der Bubbling-Phase) nach der Verarbeitung durch den aktuellen Listener zu stoppen. Die Methode event.stopImmediatePropagation() stoppt das Bubbling und verhindert, dass andere Listener auf demselben Element ausgelöst werden. event.preventDefault() verhindert die Standardaktion des Browsers im Zusammenhang mit dem Ereignis, stoppt aber nicht seine Verbreitung.