JavaScript Academy · Pelajaran

Daftar Dinamis dengan Delegasi

Kelola peristiwa untuk elemen yang ditambahkan saat runtime.

Daftar Dinamis dengan Delegasi adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Masalah Elemen Dinamis

Saat Anda memasang pendengar langsung pada elemen, elemen apa pun yang ditambahkan ke DOM setelah penyiapan tidak memiliki pendengar. Delegasi mengatasi hal ini karena pendengar pada elemen induk juga menangkap peristiwa dari elemen anak yang ditambahkan kemudian.

Pendengar Langsung Tidak Berfungsi

Di sini, pendengar ditambahkan ke elemen yang sudah ada. Elemen yang baru ditambahkan tidak mendapatkan apa pun dan tetap tidak aktif.

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

Delegasi Langsung Berfungsi

Dengan pendengar yang menggunakan delegasi pada elemen induk, elemen baru ditangani secara otomatis. Tidak perlu memasang ulang pendengar setelah setiap penyisipan.

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

Menambahkan Elemen

Buat elemen baru lalu tambahkan elemen tersebut. Karena elemen induk sudah menggunakan delegasi, elemen-elemen itu dapat berinteraksi segera setelah muncul.

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

Menghapus Elemen

Penghapusan juga sederhana. Penangan yang menggunakan delegasi dapat mendeteksi tombol hapus di dalam baris lalu menghapus baris tersebut.

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

Membedakan Subtindakan

Sebuah baris mungkin memiliki beberapa bagian yang dapat berinteraksi. Gunakan matches() atau closest() untuk mengetahui bagian mana yang diklik, lalu pilih tindakan yang sesuai.

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

Menampilkan dari Data

Pola yang umum: simpan status dalam array, tampilkan baris berdasarkan data tersebut, lalu delegasikan klik. Penampilan ulang mengganti elemen-elemen anak, tetapi satu pendengar pada elemen induk tetap bertahan tanpa perubahan.

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

Tanpa Masalah Pembersihan

Dengan pendengar per elemen, Anda harus mengingat untuk memanggil removeEventListener sebelum menghapus simpul agar tidak terjadi kebocoran. Delegasi menghilangkan beban tersebut: menghapus elemen anak tidak membuat pendengar menjadi terlantar.

Mengubah Kelas

Delegasi cocok dipadukan dengan perubahan kelas untuk status pemilihan. Penangan menemukan baris lalu mengubah sebuah kelas.

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

Membaca Identitas yang Stabil

Karena simpul DOM diganti saat penampilan ulang, jangan pernah menyimpan referensi ke simpul tersebut. Simpan id yang stabil dalam data-id dan cari data pada model data berdasarkan id itu di dalam penangan.

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

Peristiwa Masukan Juga

Delegasi tidak terbatas pada klik. Anda dapat mendelegasikan peristiwa input atau change untuk bidang formulir yang ditambahkan secara dinamis dengan cara yang sama.

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

Pemeriksaan Singkat

Daftar dinamis dan delegasi peristiwa.

Ringkasan

Delegasi sangat berguna untuk daftar dinamis: satu pendengar pada elemen induk menangani elemen anak saat ini maupun yang akan datang, tetap bertahan setelah penampilan ulang, dan tidak memerlukan pembersihan per simpul. Gunakan matches() dan closest() untuk memilih tindakan berdasarkan subtindakan, lalu simpan id yang stabil dalam data-* agar penangan dapat menemukan model data Anda.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Daftar Dinamis dengan Delegasi” gratis?

Ya — teks lengkap “Daftar Dinamis dengan Delegasi” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Daftar Dinamis dengan Delegasi”?

Kelola peristiwa untuk elemen yang ditambahkan saat runtime. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Daftar Dinamis dengan Delegasi” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy