Šta je iskačući prozor u JavaScriptu?

Механизам по којем догађај, иницијализован на DOM елементу, се шири "нагоре" кроз хијерархију до његовог родитељског елемента, све до корена (document). У default-у, већина догађаја пролази кроз три фазе:

1. Фаза захвата (Capturing): Догађај се креће низводно од корена ка циљном елементу. Слушаоци догађаја, додати са опцијом { capture: true }, активирају се у овој фази.
2. Фаза циља (Target): Догађај стиже до циљног елемента, где је иницијализован. Слушаоци директно додати на овај елемент се активирају.
3. Фаза балоновања (Bubbling): Догађај се креће нагоре од циљног елемента до корена документа. Слушаоци додати по подразумевану (без { capture: true } или са { capture: false }) се активирају у овој фази. Ово је фаза у којој се дешава "балонирање".

Балонирање омогућава имплементацију делегирања догађаја, када један слушалац на родитељском елементу обрађује догађаје из више дечијих елемената.

Пример:

// HTML:
// <div id="parent">
//   <button id="child">Кликни ме</button>
// </div>

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

parent.addEventListener('click', function() {
  console.log('Догађај је баловирао до родитеља');
});

child.addEventListener('click', function() {
  console.log('Догађај на циљном елементу (дугме)');
});

// Када се кликне на дугме 'child', редослед излаза ће бити:
// "Догађај на циљном елементу (дугме)"
// "Догађај је баловирао до родитеља"

Метода event.stopPropagation() може се користити за заустављање даљег ширења догађаја (и у фази захвата, и у фази балоновања) након што га је обрадио тренутни слушалац. Метод event.stopImmediatePropagation() зауставља баловирање и спречава активирање других слушалаца на истом елементу. event.preventDefault() спречава стандардну акцију прегледача повезану са догађајем, али не зауставља његово ширење.