JavaScript Academy · Ders

Yetkilendirmeyle Dinamik Listeler

Çalışma zamanında eklenen öğelerin olaylarını yönetin.

Yetkilendirmeyle Dinamik Listeler, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 3. 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.

Dinamik Öğe Sorunu

Dinleyicileri doğrudan öğelere eklediğinizde, kurulumdan sonra DOM'a eklenen hiçbir öğenin dinleyicisi olmaz. Delegasyon bu sorunu çözer; çünkü üst öğenin dinleyicisi gelecekte eklenecek alt öğelerden gelen olayları da yakalar.

Doğrudan Dinleyiciler Çalışmaz

Burada mevcut öğelere bir dinleyici eklenir. Sonradan eklenen bir öğe hiçbir şey almaz ve işlevsiz kalır.

document.querySelectorAll(".item").forEach((el) =>
  el.addEventListener("click", handle)
);
list.appendChild(newItem); // newItem has NO handler

Delegasyon Kendiliğinden Çalışır

Üst öğede delegasyon dinleyicisi olduğunda yeni öğe otomatik olarak işlenir. Her eklemeden sonra yeniden bağlama yapmanız gerekmez.

list.addEventListener("click", (e) => {
  const item = e.target.closest(".item");
  if (item) console.log("Clicked", item.dataset.id);
});
list.appendChild(newItem); // works immediately

Öğe Ekleme

Yeni öğeler oluşturup bunları ekleyin. Üst öğe zaten delegasyon yaptığı için öğeler görünür görünmez etkileşimli olur.

function addItem(text) {
  const li = document.createElement("li");
  li.className = "item";
  li.textContent = text;
  list.appendChild(li);
}

Öğe Silme

Silme işlemi de temizdir. Delegasyon işleyicisi satırın içindeki silme düğmesini algılayıp satırı kaldırabilir.

list.addEventListener("click", (e) => {
  if (e.target.matches(".delete-btn")) {
    e.target.closest(".item").remove();
  }
});

Alt Eylemleri Ayırt Etme

Bir satırda birden çok etkileşimli bölüm olabilir. Hangisine tıklandığını anlamak için matches() veya closest() kullanın ve ardından uygun dala geçin.

list.addEventListener("click", (e) => {
  if (e.target.matches(".edit-btn")) edit(e);
  else if (e.target.matches(".delete-btn")) del(e);
});

Verilerden Görüntüleme Oluşturma

Yaygın bir kalıp şudur: durumu bir dizide tutun, satırları bu diziden oluşturun ve tıklamaları devredin. Yeniden görüntüleme alt öğeleri değiştirir, ancak tek üst öğe dinleyicisi olduğu gibi kalır.

function render(items) {
  list.innerHTML = items
    .map((i) => "<li class=\"item\" data-id=\"" + i.id + "\">" + i.name + "</li>")
    .join("");
}

Temizleme Derdi Yok

Öğe başına dinleyiciler kullandığınızda, sızıntıları önlemek için düğümleri silmeden önce removeEventListener çağırmayı hatırlamanız gerekir. Delegasyon bu yükü ortadan kaldırır: bir alt öğeyi silmek hiçbir dinleyiciyi sahipsiz bırakmaz.

Sınıfları Değiştirme

Delegasyon, seçim durumları için sınıfları açıp kapatmayla iyi uyum sağlar. İşleyici satırı bulur ve bir sınıfı değiştirir.

list.addEventListener("click", (e) => {
  const row = e.target.closest(".item");
  if (row) row.classList.toggle("selected");
});

Kararlı Kimliği Okuma

Yeniden görüntüleme sırasında DOM düğümleri değiştirildiğinden bunlara başvuruları asla saklamayın. data-id içinde kararlı bir kimlik saklayın ve işleyici içinde veri modelinizde bu kimliğe göre arama yapın.

const id = e.target.closest(".item").dataset.id;
const record = state.find((r) => r.id === id);

Girdi Olayları da

Delegasyon yalnızca tıklamalarla sınırlı değildir. Dinamik olarak eklenen form alanları için input veya change olaylarını da aynı şekilde devredebilirsiniz.

form.addEventListener("input", (e) => {
  if (e.target.matches(".qty")) recalc(e.target);
});

Hızlı Kontrol

Dinamik listeler ve olay delegasyonu.

Özet

Delegasyon dinamik listelerde özellikle etkilidir: tek bir üst öğe dinleyicisi mevcut ve gelecekteki alt öğeleri yönetir, yeniden görüntülemelerden sonra da çalışmaya devam eder ve düğüm başına temizleme gerektirmez. Alt eylemlere göre dallanmak için matches() ve closest() kullanın; işleyicilerin veri modelinizi bulabilmesi için kararlı kimlikleri data-* içinde saklayın.

Sıkça Sorulan Sorular

“Yetkilendirmeyle Dinamik Listeler” dersi ücretsiz mi?

Evet — “Yetkilendirmeyle Dinamik Listeler” 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.

“Yetkilendirmeyle Dinamik Listeler” dersinde ne öğreneceğim?

Çalışma zamanında eklenen öğelerin olayları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 3. dersidir.

“Yetkilendirmeyle Dinamik Listeler” 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