Co je to vyskakovací okno v JavaScriptu?

Mechanismus, při kterém se událost, iniciovaná na prvku DOM, šíří "nahoru" hierarchií k jeho rodičovským prvkům až k jádru (document). Ve výchozím nastavení většina událostí prochází třemi fázemi:

1. Fáze zachycení: Událost se pohybuje zdola nahoru od kořene ke cílovému prvku. Posluchače událostí připojené s volbou { capture: true } se aktivují v této fázi.
2. Fáze cíle: Událost dosáhne cílového prvku, na kterém byla iniciována. Posluchače připojené přímo k tomuto prvku se aktivují.
3. Fáze bubblování: Událost se pohybuje vzhůru od cílového prvku ke kořeni dokumentu. Posluchače událostí připojené ve výchozím nastavení (bez { capture: true } nebo s { capture: false }) se aktivují v této fázi. Tato fáze je známá jako "bubbling".

Bubbling umožňuje implementaci delegace událostí, kdy jeden posluchač na rodičovském prvku zpracovává události z více dceřiných prvků.

Příklad:

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

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

parent.addEventListener('click', function() {
  console.log('Událost bubblovala na rodiče');
});

child.addEventListener('click', function() {
  console.log('Událost na cílovém prvku (tlačítko)');
});

// Při kliknutí na tlačítko 'child' bude sekvence výstupu:
// "Událost na cílovém prvku (tlačítko)"
// "Událost bubblovala na rodiče"

Metoda event.stopPropagation() může být použita k zastavení dalšího šíření události (jak v fázi zachycení, tak v bubblování) poté, co byla zpracována aktuálním posluchačem. Metoda event.stopImmediatePropagation() zastaví bubblování a zabrání aktivaci dalších posluchačů na stejném prvku. event.preventDefault() zabrání výchozí akci prohlížeče spojené s událostí, ale nezastaví její šíření.