Tarayıcıda olay yayılım mekanizmasını açıkla (Event Propagation)

Tarayıcıda olay yayılım mekanizması üç aşamadan oluşur:

1. Yakalama aşaması (Capturing phase) — olay, DOM ağacında yukarıdan aşağıya doğru hareket eder, genellikle kök öğeden (window veya document) hedef öğeye kadar.

2. Hedef aşaması (Target phase) — olay, gerçekleştiği hedef öğeye ulaşır.

3. Bubbling aşaması (Bubbling phase) — olay, hedef öğeden tekrar DOM ağacında yukarı doğru yükselir.

Olay işleyicileri, hangi aşamada tetikleneceklerini dikkate alarak, addEventListener'a üçüncü argümanı geçirerek atanabilir:

• true — işleyici yakalama aşamasında tetiklenir.
• false (varsayılan) — bubbling aşamasında tetiklenir.

Örnek:

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

parent.addEventListener('click', () => console.log('Parent yakalama'), true); // yakalama
parent.addEventListener('click', () => console.log('Parent bubbling')); // bubbling
child.addEventListener('click', () => console.log('Child hedef'));

Bu şekilde, olay önce yukarıdan aşağıya yakalama işleyicileri tarafından geçer, sonra hedef öğedeki işleyiciler tetiklenir ve ardından — aşağıdan yukarı bubbling işleyicileri devreye girer. Bu, karmaşık arayüzlerde olaylara yanıt vermeyi esnek bir şekilde yönetmeye olanak tanır.