Event delegation

JavaScript kursu · Orta seviye · Ders 39/134

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

Event delegation