JavaScript
Event delegation
Tek bir üst öğeye dinleyici koyarak çok sayıda çocuk öğeyi yönetmeyi öğrenirsin.
Event delegation
Çok sayıda benzer öğen (örneğin bir listedeki düğmeler) olduğunda her birine ayrı dinleyici eklemek yerine, tek bir dinleyiciyi ata öğeye eklersin. Buna event delegation denir. Kabarcıklanma sayesinde ata öğe çocukların olaylarını yakalar.
list.addEventListener('click', (event) => {
if (event.target.matches('button')) {
console.log('button clicked');
}
});
Bu yöntem daha az dinleyici demektir; bellek tasarrufu sağlar ve sonradan eklenen öğeler için de çalışır.
closest ile ata bulma
Bazen tıklanan öğe, istediğin öğenin içinde yer alır (örneğin düğmenin içinde bir simge). event.target.closest() metodu, seçiciye uyan en yakın atayı bulur. Böylece iç içe yapılarda doğru öğeyi yakalarsın.
list.addEventListener('click', (event) => {
const button = event.target.closest('button');
if (button) console.log(button.textContent);
});
matches yalnızca hedefin kendisine bakar; closest ise hedeften yukarı doğru arar. İç içe öğelerde closest daha güvenlidir.
Uygulama Liste için delegasyon dinleyicisi ekle
list değişkenini tanımla ve #list öğesini seç. Tek bir click dinleyicisi ekle ve event.target.matches('button') ile tıklanan öğenin düğme olup olmadığını kontrol et.
Örnek çözümü göster
const list = document.querySelector('#list');
list.addEventListener('click', (event) => {
if (event.target.matches('button')) {
console.log('button clicked');
}
});
Kendini test et
-
Event delegation'ın temel avantajı nedir?
list.addEventListener('click', (event) => {
if (event.target.matches('button')) {
console.log('clicked');
}
});
- Tek dinleyici ile çok sayıda öğeyi yönetmek
- Olayların daha hızlı tetiklenmesi
- Varsayılan davranışı engellemek
- Olay kabarcıklanmasını durdurmak
Cevabı göster
Tek dinleyici ile çok sayıda öğeyi yönetmek — Doğru! Delegation ile tek dinleyici çok öğeyi yönetir.
-
Hedefin düğme olup olmadığını kontrol et
list.addEventListener('click', (event) => {
if (event.target.____('button')) {
console.log('clicked');
}
});
Cevabı göster
list.addEventListener('click', (event) => {
if (event.target.matches('button')) {
console.log('clicked');
}
});
-
Metotları anlamlarıyla eşleştir
- event.target
- Tıklanan öğe
- closest()
- Seçiciye uyan en yakın ata
- matches()
- Öğe seçiciye uyuyor mu
Sıradaki ders: preventDefault
