JavaScript-də pop-up nədir?

DOM elementində başlatılan hadisənin yuxarıya doğru, yəni onun valideyn elementlərinə, kök (document) səviyyəsinə qədər yayılması mexanizmi. Əsasən, çoxsaylı hadisələr üç mərhələdən keçir:

1. Yığılma mərhələsi: Hadisə kökdən aşağıya doğru, hədəf elementə doğru hərəkət edir. { capture: true } seçimi ilə əlavə edilmiş hadisə dinləyiciləri bu mərhələdə işə düşür.
2. Hədəf mərhələsi: Hadisə, başlatıldığı hədəf elementə çatır. Bu elementə birbaşa əlavə edilmiş dinləyicilər işə düşür.
3. Baloncuk mərhələsi: Hadisə, hədəf elementdən yuxarı, sənədin kökünə doğru hərəkət edir. Əsasən, { capture: false } və ya heç bir { capture } seçimi ilə əlavə edilmiş dinləyicilər bu mərhələdə işə düşür. Bu mərhələ, klassik anlamda "baloncuk" (bubbling) mərhələsidir.

Baloncuk, hadisə nümayəndəliyi (delegation) həyata keçirməyə imkan verir; burada bir valideyn elementdəki tək bir dinləyici, çoxsaylı uşaq elementlərdən gələn hadisələri idarə edir.

Misal:

// HTML:
// <div id="parent">
//   <button id="child">Məni vur</button>
// </div>

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

parent.addEventListener('click', function() {
  console.log('Hadisə valideynə baloncukla çatdı');
});

child.addEventListener('click', function() {
  console.log('Hədəf elementdə hadisə (düymə)');
});

// 'child' düyməsinə kliklədikdə, çıxış ardıcıllığı:
// "Hədəf elementdə hadisə (düymə)"
// "Hadisə valideynə baloncukla çatdı"

event.stopPropagation() metodu, hadisənin daha çox yayılmasını (həm yığılma, həm də baloncuk mərhələsində) dayandırmaq üçün istifadə edilə bilər. event.stopImmediatePropagation() isə baloncuk mərhələsini dayandırır və eyni elementdəki digər dinləyicilərin işləməsinə imkan vermir. event.preventDefault() isə hadisə ilə əlaqəli brauzerin standart fəaliyyətini qarşısını alır, lakin yayılmasını dayandırmır.