Event bubbling
Bir olayın nasıl yukarı doğru kabarcıkladığını ve ne anlama geldiğini öğrenirsin.
Olay kabarcıklanması
Bir öğeye tıkladığında olay yalnızca o öğede kalmaz. Olay, DOM ağacında yukarı doğru ilerler: önce hedef öğenin dinleyicisi, sonra ebeveyni, sonra onun da ebeveyni çalışır. Buna olay kabarcıklanması (event bubbling) denir.
parent.addEventListener('click', () => console.log('parent'));Burada child öğesine tıklarsan önce child'ın dinleyicisi, sonra parent'ın dinleyicisi çalışır. Bu sayede birden çok öğeyi tek bir ata öğeden izleyebilirsin.
Kabarcıklanma sırası
Kabarcıklanma sırasını görmek için hem çocuğa hem ebeveyne dinleyici eklersin. Çocuğa tıkladığında konsola önce çocuk, sonra ebeveyn yazılır.
child.addEventListener('click', () => console.log('child'));
parent.addEventListener('click', () => console.log('parent'));Sıra her zaman hedeften başlar ve köke doğru ilerler. Dinleyicilerin eklenme sırası önemli değildir; önemli olan DOM hiyerarşisidir.
Uygulama parent ve child için dinleyici ekle
parent ve child değişkenlerini tanımla. querySelector ile #parent ve #child öğelerini seç. İkisine de click dinleyicisi ekle ve her birinde console.log ile bir metin yaz.
Örnek çözümü göster
const parent = document.querySelector('#parent');
const child = document.querySelector('#child');
parent.addEventListener('click', () => { console.log('parent'); });
child.addEventListener('click', () => { console.log('child'); });Kendini test et
-
child öğesine tıklarsan hangi sırayla çalışır?
parent.addEventListener('click', () => console.log('parent')); child.addEventListener('click', () => console.log('child'));- Sadece child dinleyicisi
- Önce child, sonra parent
- Önce parent, sonra child
- İkisi de çalışmaz
Cevabı göster
Önce child, sonra parent — Doğru! Olay önce hedef (child) sonra ebeveyn (parent) dinleyicisinde çalışır.
-
child için click dinleyicisi ekle
const child = document.querySelector('#child'); child.____('click', () => { console.log('clicked'); });Cevabı göster
const child = document.querySelector('#child'); child.addEventListener('click', () => { console.log('clicked'); }); -
Terimleri anlamlarıyla eşleştir
- addEventListener
- Olay dinleyici ekler
- event.target
- Olayın kaynak öğesi
- Kabarcıklanma
- Çocuktan ebeveyne yayılma