Wat is een pop-up in JavaScript?

Mechanisme waarbij een gebeurtenis die op een DOM-element wordt geïnitieerd, 'omhoog' door de hiërarchie wordt verspreid tot aan het ouderlijke element, tot aan de root (document). Standaard doorlopen de meeste gebeurtenissen drie fasen:

1. Capturatiefase: De gebeurtenis beweegt van de root naar beneden naar het doel-element. Eventlisteners die met de optie { capture: true } zijn gekoppeld, worden in deze fase geactiveerd.
2. Doelfase: De gebeurtenis bereikt het doel-element waarop het is geïnitieerd. Eventlisteners die direct aan dit element zijn gekoppeld, worden geactiveerd.
3. Bubbling-fase: De gebeurtenis beweegt omhoog van het doel-element naar de root van het document. Eventlisteners die standaard (zonder { capture: true } of met { capture: false }) zijn gekoppeld, worden in deze fase geactiveerd. Dit is de fase waarin de 'bubbling' plaatsvindt.

Bubbling maakt het mogelijk om gebeurtenisdelegatie te implementeren, waarbij één listener op een ouderlijk element gebeurtenissen van meerdere kindelementen afhandelt.

Voorbeeld:

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

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

parent.addEventListener('click', function() {
  console.log('De gebeurtenis bubbelt naar de ouder');
});

child.addEventListener('click', function() {
  console.log('Gebeurtenis op het doel-element (knop)');
});

// Bij het klikken op de knop 'child' zal de outputvolgorde zijn:
// "Gebeurtenis op het doel-element (knop)"
// "De gebeurtenis bubbelt naar de ouder"

De methode event.stopPropagation() kan worden gebruikt om verdere verspreiding van de gebeurtenis te stoppen (zowel in de capture- als in de bubbling-fase) nadat deze door de huidige listener is afgehandeld. De methode event.stopImmediatePropagation() stopt de bubbling en voorkomt dat andere listeners op hetzelfde element worden geactiveerd. event.preventDefault() voorkomt de standaardactie van de browser die met de gebeurtenis verband houdt, maar stopt de verspreiding ervan niet.