Akademi JavaScript · Pelajaran

Corak Pewakilan Peristiwa

Kendalikan banyak peristiwa anak daripada satu pendengar induk.

Pelajaran 2 daripada 413 langkah

Corak Pewakilan Peristiwa ialah pelajaran Akademi JavaScript percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Akademi JavaScript, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

Satu Pendengar untuk Mengawal Kesemuanya

Delegasi acara bermaksud melampirkan satu pendengar pada leluhur bersama dan bukannya banyak pendengar pada setiap elemen anak. Oleh sebab acara menggelembung, elemen induk menerima klik daripada semua keturunannya.

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

Pendekatan Naif

Tanpa delegasi, Anda perlu mengulangi setiap butiran dan melampirkan pengendali. Itu membazir: penggunaan memori bertambah dan pendekatan ini gagal untuk elemen yang ditambah kemudian.

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

Pendekatan Delegasi

Sebaliknya, lampirkan satu pendengar pada elemen induk dan periksa event.target untuk mengetahui elemen anak yang diklik.

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

Memadankan Sasaran yang Betul

Klik mungkin berlaku pada elemen bersarang. Gunakan event.target.closest(selector) untuk bergerak ke atas dan mencari leluhur berkaitan yang sepadan 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);
});

Melindungi dengan Semakan

Sentiasa buat semakan terhadap klik yang tidak sepadan. Jalan keluar awal if (!item) return; menghalang pengendali Anda daripada ranap apabila pengguna mengklik ruang kosong atau jarak di dalam bekas.

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

Menggunakan Atribut Data

Corak biasa menyimpan id atau tindakan pada setiap butiran menggunakan atribut data-*. Pengendali delegasi membacanya daripada elemen yang sepadan.

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

Menghantar Berdasarkan Tindakan

Untuk bar alat dengan banyak butang, berikan setiap butang data-action dan buat percabangan berdasarkan nilainya. Satu pendengar mengendalikan semua butang.

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 Ia Boleh Diskalakan

Dengan delegasi, senarai yang mempunyai 1000 baris hanya memerlukan satu pendengar berbanding 1000 pendengar. Penggunaan memori lebih rendah, persediaan lebih pantas dan tiada gelung pembersihan apabila baris berubah.

Nota Prestasi

Delegasi memang mempunyai sedikit kos: setiap acara yang sepadan menjalankan pengendali Anda, yang kemudiannya menapis acara tersebut. Bagi kebanyakan aplikasi, kos ini tidak ketara berbanding penjimatan yang diperoleh, tetapi elakkan melampirkan pendengar delegasi pada document untuk acara berfrekuensi sangat tinggi seperti mousemove.

Memilih Bekas

Pilih leluhur stabil terdekat yang mengandungi semua sasaran. Delegasi kepada bekas yang lebih khusus (senarai itu sendiri) lebih baik daripada delegasi kepada document, kerana lebih sedikit acara yang tidak berkaitan akan mencetuskan pengendali Anda.

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

Menggabungkan dengan closest

closest() ialah teras delegasi. Ia mengembalikan elemen itu sendiri jika sepadan, atau leluhur terdekat yang sepadan, atau null. Ini menjadikan penandaan pada struktur bersarang selamat untuk didelegasikan.

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

Semakan Pantas

Mengapakah delegasi acara digunakan?

Jawab dalam pelajaran interaktif

Ringkasan

Delegasi acara melampirkan satu pendengar pada elemen induk dan menggunakan penggelembungan untuk mengendalikan semua elemen anak. Gunakan e.target.closest(selector) untuk mencari elemen yang berkaitan, buat semakan dengan pemulangan awal dan baca atribut data-* untuk menghantar tindakan. Pendekatan ini boleh diskalakan kepada senarai yang sangat besar dan merupakan corak standard untuk UI dinamik.

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 59
Pelajaran: 200

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Corak Pewakilan Peristiwa” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Akademi JavaScript, termasuk “Corak Pewakilan Peristiwa”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Corak Pewakilan Peristiwa”?

Kendalikan banyak peristiwa anak daripada satu pendengar induk. Anda berlatih Akademi JavaScript menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Akademi JavaScript?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Akademi JavaScript di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Corak Pewakilan Peristiwa” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Akademi JavaScript ini?

Ya. Setiap pelajaran Akademi JavaScript menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Akademi JavaScript