JavaScript Academy · Pelajaran

Pola Delegasi Peristiwa

Tangani banyak peristiwa anak dari satu pendengar induk.

Pola Delegasi Peristiwa adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.

Satu Pendengar untuk Semuanya

Delegasi peristiwa berarti memasang satu pendengar pada leluhur bersama, bukan banyak pendengar pada setiap elemen anak. Karena peristiwa merambat naik, elemen induk menerima klik dari semua turunannya.

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

Pendekatan Naif

Tanpa delegasi, Anda harus melakukan perulangan pada setiap elemen lalu memasang penangan. Cara ini boros: membutuhkan lebih banyak memori dan tidak berfungsi untuk elemen yang ditambahkan kemudian.

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

Pendekatan dengan Delegasi

Sebagai gantinya, pasang satu pendengar pada elemen induk dan periksa event.target untuk mengetahui elemen anak mana yang diklik.

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

Mencocokkan Sasaran yang Tepat

Klik dapat mengenai elemen bersarang. Gunakan event.target.closest(selector) untuk menelusuri ke atas dan menemukan leluhur yang sesuai dengan pemilih Anda.

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

Menjaga dengan Pemeriksaan

Selalu lakukan pemeriksaan untuk klik yang tidak cocok. Keluar lebih awal dengan if (!item) return; akan mencegah penangan Anda mengalami kerusakan saat pengguna mengeklik ruang kosong atau celah di dalam wadah.

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

Menggunakan Atribut Data

Pola yang umum adalah menyimpan id atau tindakan pada setiap elemen menggunakan atribut data-*. Penangan yang menggunakan delegasi membacanya dari elemen yang cocok.

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);
});

Mendistribusikan Berdasarkan Tindakan

Untuk bilah alat dengan banyak tombol, berikan masing-masing tombol data-action lalu lakukan pemilihan berdasarkan nilainya. Satu pendengar menangani semua tombol.

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;
  }
});

Mengapa Ini Dapat Diskalakan

Dengan delegasi, daftar berisi 1000 baris hanya memerlukan satu pendengar, bukan 1000 pendengar. Memori lebih sedikit, penyiapan lebih cepat, dan tidak ada perulangan pembersihan saat baris berubah.

Catatan Kinerja

Delegasi memang memiliki sedikit biaya: setiap peristiwa yang cocok menjalankan penangan Anda, lalu penangan tersebut melakukan penyaringan. Untuk sebagian besar aplikasi, biayanya dapat diabaikan dibandingkan penghematannya, tetapi hindari memasang pendengar dengan delegasi pada document untuk peristiwa yang sangat sering terjadi seperti mousemove.

Memilih Wadah

Pilih leluhur stabil terdekat yang memuat semua sasaran. Delegasi pada wadah yang lebih spesifik (daftarnya sendiri) lebih baik daripada delegasi pada document, karena lebih sedikit peristiwa yang tidak berkaitan akan memicu penangan Anda.

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

Menggabungkan dengan closest

closest() adalah inti delegasi. Fungsi ini mengembalikan elemen itu sendiri jika cocok, leluhur terdekat yang cocok, atau null. Dengan demikian, markup bersarang aman digunakan bersama delegasi.

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

Pemeriksaan Singkat

Mengapa menggunakan delegasi peristiwa?

Ringkasan

Delegasi peristiwa memasang satu pendengar pada elemen induk dan menggunakan perambatan naik untuk menangani semua elemen anak. Gunakan e.target.closest(selector) untuk menemukan elemen yang relevan, lakukan pemeriksaan dengan keluar lebih awal, dan baca atribut data-* untuk mendistribusikan tindakan. Pola ini dapat diskalakan untuk daftar yang sangat besar dan merupakan pola standar untuk antarmuka pengguna dinamis.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pola Delegasi Peristiwa” gratis?

Ya — teks lengkap “Pola Delegasi Peristiwa” 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 “Pola Delegasi Peristiwa”?

Tangani banyak peristiwa anak dari satu pendengar induk. 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 2 dari 4.

Berapa lama pelajaran “Pola Delegasi Peristiwa” 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