Какво е изскачащ прозорец в JavaScript?

Механизм, при който събитие, инициирано на DOM елемент, се разпространява "нагоре" по йерархията към неговите родителски елементи, докрай до корена (document). По подразбиране, повечето събития преминават през три фази:

1. Фаза на засичане (Capturing): Събитието се движи надолу от корена към целевия елемент. Обработчиците на събития, добавени с опцията { capture: true }, се активират в тази фаза.
2. Фаза на целта: Събитието достига целевия елемент, на който е инициирано. Обработчиците, добавени директно към този елемент, се активират.
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() предотвратява стандартното действие на браузъра, свързано със събитието, но не спира разпространението му.