JavaScript'te pop-up nedir?

Bir DOM öğesinde başlatılan olayın, kök (document) seviyesine kadar yukarı doğru yayılmasını sağlayan mekanizma. Varsayılan olarak, çoğu olay üç aşamadan geçer:

1. Yakalama (Capturing) aşaması: Olay, kök seviyesinden hedef elemana doğru aşağı doğru hareket eder. { capture: true } seçeneğiyle eklenmiş olay dinleyicileri bu aşamada tetiklenir.
2. Hedef aşaması: Olay, başlatıldığı hedef elemana ulaşır. Bu elemana doğrudan eklenmiş dinleyiciler tetiklenir.
3. Bubbling (Baloncuk) aşaması: Olay, hedef elementten yukarı doğru, belge köküne kadar yükselir. Varsayılan olarak, { capture: false } veya herhangi bir ayar olmadan eklenmiş olay dinleyicileri bu aşamada tetiklenir. Bu aşama, klasik anlamda "baloncuk" (bubbling) olarak bilinir.

Baloncuk, olay delegasyonu uygulamayı sağlar; burada bir ebeveyn öğedeki tek bir dinleyici, çocuk öğelerden gelen olayları işler.

Örnek:

// HTML:
// <div id="parent">
//   <button id="child">Bana tıkla</button>
// </div>

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

parent.addEventListener('click', function() {
  console.log('Olay ebeveyne baloncuk yaptı');
});

child.addEventListener('click', function() {
  console.log('Hedef öğedeki olay (düğme)');
});

// 'child' düğmesine tıklandığında, çıktı sırası:
// "Hedef öğedeki olay (düğme)"
// "Olay ebeveyne baloncuk yaptı"

event.stopPropagation() metodu, olayın daha fazla yayılmasını durdurmak için kullanılabilir (hem yakalama hem de baloncuk aşamasında), olay şu anki dinleyici tarafından işlendiğinde. event.stopImmediatePropagation() ise baloncuk ve diğer dinleyicilerin tetiklenmesini engeller. event.preventDefault() ise olayla ilişkili tarayıcı varsayılan davranışını engeller, yayılmasını durdurmaz.