Čo je to vyskakovacie okno v JavaScriptu?

Mechanizmus, pri ktorom sa udalosť, iniciovaná na prvku DOM, šíri "nahor" hierarchiou k jeho rodičovským prvkom až k jadru (document). Vo východiskovom nastavení prechádza väčšina udalostí tromi fázami:

1. Fáza zachytávania: Udalosť sa pohybuje zdola nahor od koreňa k cieľovému prvku. Poslucháče udalostí pripojené s možnosťou { capture: true } sa aktivujú v tejto fáze.
2. Fáza cieľa: Udalosť dosiahne cieľový prvok, na ktorom bola iniciovaná. Poslucháče pripojené priamo k tomuto prvku sa aktivujú.
3. Fáza bubblovania: Udalosť sa pohybuje nahor od cieľového prvku k koreňu dokumentu. Vo východiskovom nastavení sa aktivujú poslucháče pripojené bez { capture: true } alebo s { capture: false }. Toto je fáza, v ktorej dochádza k "bubblingu".

Bubbling umožňuje implementáciu delegácie udalostí, keď jeden poslucháč na rodičovskom prvku spracováva udalosti z viacerých detských prvkov.

Príklad:

// HTML:
// <div id="parent">
//   <button id="child">Klikni na mňa</button>
// </div>

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

parent.addEventListener('click', function() {
  console.log('Udalosť bubblovala na rodiča');
});

child.addEventListener('click', function() {
  console.log('Udalosť na cieľovom prvku (tlačidlo)');
});

// Pri kliknutí na tlačidlo 'child' bude sekvencia výstupu:
// "Udalosť na cieľovom prvku (tlačidlo)"
// "Udalosť bubblovala na rodiča"

Metóda event.stopPropagation() môže byť použitá na zastavenie ďalšieho šírenia udalosti (ako v fáze zachytávania, tak v bubblovaní) po tom, čo bola spracovaná aktuálnym poslucháčom. Metóda event.stopImmediatePropagation() zastavuje bubblovanie a zabraňuje aktivácii ďalších poslucháčov na tom istom prvku. event.preventDefault() zabraňuje štandardnej akcii prehliadača súvisiacej s udalosťou, ale nezastavuje jej šírenie.