JavaScript Academy · Ders

Olay Yetkilendirme Deseni

Tek bir üst dinleyiciden çok sayıda alt öğe olayını yönetin.

Olay Yetkilendirme Deseni, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

Hepsini Yönetmek İçin Tek Dinleyici

Olay delegasyonu, tek tek alt öğelere çok sayıda dinleyici eklemek yerine ortak bir ata öğeye tek bir dinleyici eklemek anlamına gelir. Olaylar kabardığı için üst öğe, tüm alt öğelerinden gelen tıklamaları alır.

<ul id="menu">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

İlk Akla Gelen Yaklaşım

Delegasyon olmadan her öğe üzerinde döngü kurup bir işleyici eklersiniz. Bu savurgancadır: daha fazla bellek kullanır ve sonradan eklenen öğelerde çalışmaz.

document.querySelectorAll("#menu li").forEach((li) => {
  li.addEventListener("click", () => console.log(li.textContent));
});

Delegasyon Yaklaşımı

Bunun yerine üst öğeye tek bir dinleyici ekleyin ve hangi alt öğeye tıklandığını bulmak için event.target değerini inceleyin.

const menu = document.getElementById("menu");
menu.addEventListener("click", (e) => {
  console.log(e.target.textContent);
});

Doğru Hedefi Eşleştirme

Tıklama iç içe bir öğenin üzerine gelebilir. Yukarı doğru ilerleyip seçicinizle eşleşen ilgili ata öğeyi bulmak için event.target.closest(selector) kullanın.

menu.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (!item) return; // clicked outside any li
  console.log("Clicked:", item.textContent);
});

Bir Denetimle Koruma

Eşleşmeyen tıklamalara karşı her zaman koruma ekleyin. if (!item) return; biçimindeki erken çıkış, kullanıcı kapsayıcının içindeki dolguya veya boşluğa tıkladığında işleyicinizin çökmemesini sağlar.

menu.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (!item || !menu.contains(item)) return;
  handleSelect(item);
});

Veri Özniteliklerini Kullanma

Yaygın bir kalıp, her öğede bir kimliği veya eylemi data-* özniteliğiyle saklamaktır. Delegasyon işleyicisi bunu eşleşen öğeden okur.

menu.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (!item) return;
  const id = item.dataset.id;   // reads data-id
  console.log("Selected id:", id);
});

Eyleme Göre Yönlendirme

Çok sayıda düğme içeren araç çubuklarında her birine bir data-action verip bu değere göre seçim yapın. Tek bir dinleyici tüm düğmeleri yönetir.

toolbar.addEventListener("click", (e) => {
  const btn = e.target.closest("button");
  if (!btn) return;
  switch (btn.dataset.action) {
    case "save": save(); break;
    case "delete": remove(); break;
  }
});

Neden Ölçeklenebilir

Delegasyonla 1000 satırlık bir liste için 1000 dinleyici yerine yalnızca bir dinleyici gerekir. Daha az bellek kullanılır, kurulum hızlanır ve satırlar değiştiğinde temizleme döngüsüne gerek kalmaz.

Performans Notu

Delegasyonun küçük bir maliyeti de vardır: eşleşen her olay işleyicinizi çalıştırır ve işleyiciniz ardından filtreleme yapar. Çoğu uygulamada bu maliyet sağlanan kazançlara kıyasla ihmal edilebilir düzeydedir, ancak mousemove gibi çok sık gerçekleşen olaylar için document öğesine delegasyon dinleyicileri eklemekten kaçının.

Kapsayıcıyı Seçme

Tüm hedefleri içeren en yakın kararlı ata öğeyi seçin. Delegasyonu document yerine dar kapsamlı bir kapsayıcıya (listenin kendisine) yapmak daha iyidir; böylece işleyiciniz daha az ilgisiz olay tarafından tetiklenir.

const list = document.querySelector(".task-list");
list.addEventListener("click", onTaskClick);

closest ile Birleştirme

closest(), delegasyonun temelidir. Eşleşiyorsa öğenin kendisini, eşleşmiyorsa en yakın eşleşen ata öğeyi, hiçbiri yoksa null değerini döndürür. Bu, iç içe işaretlemelerde güvenle delegasyon yapmanızı sağlar.

const cell = e.target.closest("td[data-col]");
if (cell) console.log(cell.dataset.col);

Hızlı Kontrol

Olay delegasyonu neden kullanılır?

Özet

Olay delegasyonu, bir üst öğeye tek bir dinleyici ekler ve tüm alt öğeleri yönetmek için kabarmayı kullanır. İlgili öğeyi bulmak için e.target.closest(selector) kullanın, erken dönüşle koruma ekleyin ve eylemleri yönlendirmek için data-* özniteliklerini okuyun. Bu yaklaşım çok büyük listelere ölçeklenir ve dinamik kullanıcı arayüzleri için standart kalıptır.

Sıkça Sorulan Sorular

“Olay Yetkilendirme Deseni” dersi ücretsiz mi?

Evet — “Olay Yetkilendirme Deseni” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“Olay Yetkilendirme Deseni” dersinde ne öğreneceğim?

Tek bir üst dinleyiciden çok sayıda alt öğe olayını yönetin. JavaScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Olay Yetkilendirme Deseni” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← JavaScript Academy Sayfasına Dön