JavaScript’te event delegation nasıl kullanılır?

JavaScript'te Event Delegation Kullanımı

Event delegation, birden fazla benzer öğe için tek bir olay dinleyicisi kullanarak etkinlikleri yönetme tekniğidir. Bu, performansı artırır ve daha az kod yazılmasını sağlar.

Nasıl Çalışır?

Event delegation, olay dinleyicisini üst öğeye (parent element) yerleştirerek çalışır. Olay, alt öğelerde (child elements) tetiklendiğinde, üst öğe üzerinde yakalanır.

Kullanım Aşamaları

• Üst öğeyi seçin.
• Olay dinleyicisini üst öğeye ekleyin.
• Olayın hangi alt öğelerde tetikleneceğini kontrol edin.

Örnek Kod

Aşağıdaki örnekte, bir liste öğesi üzerinde event delegation uygulanmıştır:

const ul = document.getElementById('myList');

ul.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        alert('Liste öğesine tıklandı: ' + event.target.textContent);
    }
});

Avantajları

• Performansı artırır.
• Dinleyici sayısını azaltır.
• Dinamik öğeleri yönetmeyi kolaylaştırır.

Event delegation, özellikle dinamik içerik ve büyük listelerle çalışırken oldukça yararlıdır.