Event Delegation: on() ve off() ile Dinamik Event Yönetimi

Şöyle bir senaryo düşünün: Bir ürün listesi var ve her ürünün bir ‘Sepete Ekle’ butonu var. Bu butonlara tek tek `addEventListener` eklemek yerine, ana bir konteyner’a (mesela bir `div`) tek bir tıklama eventi ekleyip, olayın hangi ‘Sepete Ekle’ butonundan geldiğini kontrol edebilirsiniz. Bu hem kodunuzu daha temiz tutar hem de performansı artırır. Tabii ki bu sadece tıklama eventleri için değil, mouse over, keypress gibi pek çok event için de geçerli. Bir yerde okumuştum sanırım, Event Delegation, çok sayıda elementle çalışırken performansı %70’lere kadar artırabiliyormuş, ne güzel değil mi? Gerçi bu rakamlar biraz değişkendir ama genel mantık doğru.

jQuery’deki `on()` metodu, işte tam da bu iş için harika bir araç. Sadece tek bir elemente değil, aynı zamanda o elementin içindeki belirli seçicilere de event atamanızı sağlıyor. Yani, `$(parentElement).on(‘click’, ‘.selector’, function() { … });` gibi bir yapı kullanabiliyorsunuz. Burada `.selector`, olayın tetiklendiği alt elemanı temsil ediyor. Örneğin, bir `

` elementiniz varsa ve içindeki `
• `’lere tıklama eventi eklemek istiyorsanız, şöyle bir şey yapabilirsiniz: `$(‘ul’).on(‘click’, ‘li’, function() { … });`. Bu sayede, sonradan listeye eklenen `
• `’ler için bile ekstra bir işlem yapmanıza gerek kalmıyor, çünkü event listener zaten üst elemana tanımlı.

  Bu yaklaşımın en büyük güzelliği, dinamik olarak DOM’a eklenen elemanlarla uğraşırken işleri inanılmaz kolaylaştırması. Hani bir form gönderimi yaptınız ve sonuçlara göre yeni bir tablo satırı eklediniz. Eskiden bu yeni satıra da ayrı bir event listener eklemeniz gerekirdi, değil mi? Ama Event Delegation ile bu derdiniz ortadan kalkıyor. Üst bir ataya eklenen event listener, yeni eklenen elemanları da otomatik olarak yakalayabiliyor. Bu da kodunuzu daha az hata yapmaya müsait hale getiriyor.

  Peki, bu olayları nasıl kapatacağız? İşte orada da `off()` metodu devreye giriyor. Eğer bir elemente eklediğiniz event listener’ı artık kullanmak istemiyorsanız, `off()` metodu ile onu kolayca kaldırabilirsiniz. Bu, özellikle component’lar yok edildiğinde veya artık gerekmeyen event’leri temizlemek istediğinizde çok kullanışlı oluyor. Aksi takdirde, gereksiz event listener’lar bellekte yer kaplamaya devam eder ve performans sorunlarına yol açabilir. Sanırım bu da önemli bir nokta.

  Şimdi gelelim işin kod kısmına. Gelin basit bir örnekle bunu pekiştirelim. Diyelim ki bir görev listemiz var ve her görevin yanında bir ‘Tamamlandı’ butonu var. Eskiden her butona ayrı ayrı event eklerdik, ama şimdi bu işi `on()` ile halledeceğiz.

  Yanlış Yöntem (Her Butona Ayrı Event)

  Bu kodda, her ‘Tamamlandı’ butonuna ayrı ayrı `addEventListener` ekleniyor. Eğer liste uzarsa veya dinamik olarak elemanlar eklenirse, her yeni eleman için bu işlemi tekrarlamanız gerekir.

  // HTML yapınız şöyle olmalı: // <ul id="gorevListesi"> //   <li>Görev 1 <button class="tamamlandiBtn">Tamamlandı</button></li> //   <li>Görev 2 <button class="tamamlandiBtn">Tamamlandı</button></li> // </ul>
  const tamamlandiButonlari = document.querySelectorAll('.tamamlandiBtn');
  tamamlandiButonlari.forEach(button => {   button.addEventListener('click', function() {     // Bu görevi tamamlandı olarak işaretle     this.parentElement.style.textDecoration = 'line-through';     console.log('Görev tamamlandı!');   }); });
  // Diyelim ki yeni bir görev ekledik: // const yeniGorev = document.createElement('li'); // yeniGorev.innerHTML = 'Görev 3 <button class="tamamlandiBtn">Tamamlandı</button>'; // document.getElementById('gorevListesi').appendChild(yeniGorev); // Bu yeni görevdeki butona event eklemek için tekrar querySelectorAll yapıp döngü kurmanız gerekir. 

  Gördüğünüz gibi, yeni görev eklediğinizde o görevdeki buton için ayrıca bir işlem yapmanız gerekiyor. Bu da işleri biraz uzatıyor, değil mi?

  Şimdi gelelim olayın daha akıllıca, yani Event Delegation ile nasıl yapılabileceğine.

  Doğru Yöntem (Event Delegation ile on())

  Bu yöntemde, tüm tıklama olaylarını `

  ` elementine bağlıyoruz. Eğer tıklanan elemanın bir ‘Tamamlandı’ butonuysa, o zaman ilgili işlemi yapıyoruz. Bu kadar basit. Hem kod daha kısa hem de dinamik eklenen görevler için ekstra bir işlem yapmaya gerek kalmıyor.

  // HTML yapısı aynı kalıyor: // <ul id="gorevListesi"> //   <li>Görev 1 <button class="tamamlandiBtn">Tamamlandı</button></li> //   <li>Görev 2 <button class="tamamlandiBtn">Tamamlandı</button></li> // </ul>
  const gorevListesi = document.getElementById('gorevListesi');
  gorevListesi.addEventListener('click', function(event) {   // Tıklanan elemanın bir 'tamamlandiBtn' sınıfına sahip olup olmadığını kontrol et   if (event.target.classList.contains('tamamlandiBtn')) {     // Evet, bir 'tamamlandiBtn'e tıklandı     event.target.parentElement.style.textDecoration = 'line-through';     console.log('Görev tamamlandı!');   } });
  // Şimdi yeni bir görev ekleyelim, yine aynı kodla: // const yeniGorev = document.createElement('li'); // yeniGorev.innerHTML = 'Görev 3 <button class="tamamlandiBtn">Tamamlandı</button>'; // gorevListesi.appendChild(yeniGorev); // Yeni eklenen görevdeki buton da otomatik olarak çalışacaktır. Harika değil mi? :) 

  Gördünüz mü? İşte bu kadar. Modern JavaScript’te `addEventListener` ile de aynı mantığı kurabiliyoruz. jQuery’deki `on()` metodu da bu mantığı temel alıyor ve biraz daha kısa söz dizimi sunuyor. Neticede, Event Delegation, web geliştiricilerinin hayatını kolaylaştıran, performansı artıran ve kod tekrarını azaltan çok önemli bir konsept. Bu konuyu iyice anlamak, özellikle interaktif ve dinamik arayüzler geliştirirken size büyük fayda sağlayacaktır.

  Bu arada, `off()` metodunu kullanmayı unutmayın. Diyelim ki bir modal pencere açtınız ve içine bazı event listener’lar eklediniz. Modal kapandığında bu listener’ları `off()` ile temizlemezseniz, ileride hem gereksiz yere çalışmaya devam ederler hem de bellek sızıntısına yol açabilirler. Yani, olaya başladığınızda `on()` ile ekliyorsanız, bitirdiğinizde `off()` ile temizlemeyi de ihmal etmeyin. Bana göre bu, iyi bir kod yazmanın temel prensiplerinden biri.

  Sonuç olarak, Event Delegation ve jQuery’nin `on()` ve `off()` gibi metotları, JavaScript’te event yönetimi konusunda bize güçlü araçlar sunuyor. Özellikle dinamik içeriklerle çalışırken bu yaklaşımı benimsemek, kodunuzu daha verimli, daha okunabilir ve daha bakımlı hale getirecektir. Denemeye değer bence!