Delege etme nedir?

Olayların yönlendirilmesi, tek bir olay işleyicisinin çok sayfalı çocuk öğelerin olaylarını yönetmesine olanak tanıyan bir tasarım desenidir. Her öğeye bir işleyici atamak yerine, işleyici ebeveyn öğeye atanır. Bir çocuk öğesinde olay gerçekleştiğinde, bu olay "baloncuklama" (bubbling) yoluyla ebeveynine doğru yükselir ve burada işleyici tarafından yakalanıp işlenebilir.

Çalışma prensibi:

• Olay, hedef öğede (örneğin, <button>) tetiklenir.
• Olay, DOM ağacında yukarı doğru yayılır ve ebeveyn öğelere ulaşır.
• Ebeveyn öğeye eklenmiş olay işleyici, olayı yakalar.
• İşleyicide, event.target kullanılarak olayın hangi çocuk öğesinde gerçekleştiği belirlenebilir.

Avantajlar:

• Performans: Daha az olay işleyicisi, bu da bellek ve işlemci kullanımını azaltır, özellikle büyük listeler veya tablolar için.
• Yönetim kolaylığı: DOM'a öğe eklemek ve kaldırmak daha kolaydır, çünkü sürekli olarak işleyicileri bağlama veya ayırma gerekmez.
• Kod temizliği: İşleyicileri bağlamak için daha az tekrar eden kod.

Örnek:

Her biri için tıklamaya yanıt vermek istediğimiz bir öğe listemiz olduğunu varsayalım.

Delegasyon olmadan, her <li> öğesine bir işleyici bağlamamız gerekirdi:

// Tüm `<li>` öğelerini al
const listItems = document.querySelectorAll('li');

// Her öğeye işleyici ekle
listItems.forEach(item => {
    item.addEventListener('click', function() {
        console.log('Tıklandı:', this.textContent);
    });
});

Delegasyon ile, sadece <ul>'ye bir işleyici ekleriz:

// Üst listeyi al
const list = document.querySelector('ul');

// `<ul>`'ye olay işleyici ekle
list.addEventListener('click', function(event) {
    // `<li>` üzerine tıklandığını kontrol et
    if (event.target.tagName === 'LI') {
        console.log('Tıklandı:', event.target.textContent);
    }
});

Bu örnekte, hangi <li> öğesinin tıklandığını belirlemek için event.target kullanıyoruz.