Event delegation nedir, neden kullanılır?

Event delegation, çok sayıda alt elemana ayrı ayrı event listener eklemek yerine ortak ebeveyne tek bir listener ekleyip olayın hangi elemandan geldiğini event.target ile ayırt etmektir. Olay kabarcıklanma (bubbling) sayesinde mümkündür.

document.querySelector("#liste").addEventListener("click", (e) => {
  const satir = e.target.closest("li[data-id]");
  if (!satir) return;
  sil(satir.dataset.id);
});

Avantajları:

• Tek listener: daha az bellek
• Sonradan eklenen elemanlar için ek kod gerekmez
• Liste yeniden çizildiğinde listener'ları temizlemekle uğraşılmaz

focus, blur gibi kabarcıklanmayan olaylar için focusin / focusout kullanılır.