Akademi JavaScript · Pelajaran

Peristiwa Tersuai

Cipta dan hantar peristiwa anda sendiri.

Pelajaran 4 daripada 413 langkah

Peristiwa Tersuai ialah pelajaran Akademi JavaScript percuma di CoddyKit. Ini ialah pelajaran 4 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.

Melangkaui Acara Terbina Dalam

DOM membolehkan Anda mencipta dan menghantar acara sendiri dengan CustomEvent. Ini mengasingkan bahagian aplikasi Anda: satu komponen mengumumkan bahawa sesuatu telah berlaku, manakala komponen lain mendengar tanpa rujukan terus.

Mencipta CustomEvent

Bina satu dengan new CustomEvent(name, options). Nama itu boleh berupa apa-apa rentetan yang Anda pilih.

const evt = new CustomEvent("cart:add");
console.log(evt.type); // "cart:add"

Menghantarnya

Cetuskan acara pada sasaran dengan dispatchEvent. Mana-mana pendengar yang didaftarkan untuk nama itu pada sasaran (atau leluhur, jika acara menggelembung) akan berjalan.

element.dispatchEvent(new CustomEvent("cart:add"));

Mendengarnya

Dengar seperti acara natif menggunakan addEventListener dengan nama tersuai Anda.

element.addEventListener("cart:add", () => {
  console.log("Something was added to the cart");
});

Menghantar Data dengan detail

Pasangkan muatan melalui sifat detail. Pendengar membacanya daripada event.detail.

const evt = new CustomEvent("cart:add", {
  detail: { id: 42, qty: 2 }
});
element.dispatchEvent(evt);

Membaca Muatan

Di dalam pendengar, event.detail mengandungi apa sahaja yang Anda hantarkan. Ia boleh berupa apa-apa nilai: objek, tatasusunan, rentetan atau nombor.

element.addEventListener("cart:add", (e) => {
  console.log(e.detail.id, e.detail.qty); // 42 2
});

Membolehkan Penggelembungan

Secara lalai, acara tersuai NOT menggelembung. Tetapkan bubbles: true supaya leluhur dan pendengar delegasi dapat mendengarnya.

const evt = new CustomEvent("cart:add", {
  bubbles: true,
  detail: { id: 42 }
});
child.dispatchEvent(evt); // parents can now listen

Pilihan Boleh Dibatalkan

Tetapkan cancelable: true untuk membolehkan pendengar memanggil preventDefault(). Penghantar menyemak nilai pulangan dispatchEvent untuk mengetahui sama ada acara itu dibatalkan.

const evt = new CustomEvent("form:submit", { cancelable: true });
const proceed = form.dispatchEvent(evt);
if (proceed) actuallySubmit();

Corak Pengasingan

Acara tersuai membolehkan modul berkomunikasi tanpa mengimport satu sama lain. Lapisan pembalakan atau analitik boleh mendengar pada document untuk acara seluruh aplikasi.

document.addEventListener("user:login", (e) => {
  analytics.track("login", e.detail.userId);
});
document.dispatchEvent(
  new CustomEvent("user:login", { detail: { userId: 7 } })
);

Konvensyen Penamaan

Letakkan nama acara dalam ruang nama (seperti cart:add, user:login) untuk mengelakkan pertembungan dengan acara natif dan mengumpulkan acara berkaitan dengan jelas.

Sintaks Lama berbanding Baharu

Anda mungkin melihat API legasi document.createEvent dalam kod lama. Utamakan pembina moden new CustomEvent(...); sintaks ini lebih ringkas dan satu-satunya bentuk yang patut Anda tulis pada masa ini.

const evt = new CustomEvent("ready", { detail: 1 });

Semakan Pantas

Semakan pengetahuan tentang acara tersuai.

Jawab dalam pelajaran interaktif

Ringkasan

Gunakan new CustomEvent(name, { detail, bubbles, cancelable }) dan dispatchEvent untuk mencipta acara sendiri. Baca muatan melalui event.detail, pilih penggelembungan untuk delegasi dan gunakan cancelable bagi tindakan yang boleh dihalang. Acara tersuai mengasingkan komponen ke dalam gaya terbit-langgan yang kemas.

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 “Peristiwa Tersuai” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Akademi JavaScript, termasuk “Peristiwa Tersuai”, 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 “Peristiwa Tersuai”?

Cipta dan hantar peristiwa anda sendiri. 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 4 daripada 4.

Berapa lamakah pelajaran “Peristiwa Tersuai” 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