Peristiwa Khusus
Buat dan kirim peristiwa Anda sendiri.
Peristiwa Khusus adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.
Di Luar Peristiwa Bawaan
DOM memungkinkan Anda membuat dan mendistribusikan peristiwa sendiri dengan CustomEvent. Hal ini memisahkan bagian-bagian aplikasi Anda: satu komponen mengumumkan bahwa sesuatu telah terjadi, sementara komponen lain mendengarkan tanpa referensi langsung.
Membuat CustomEvent
Buat satu dengan new CustomEvent(name, options). Namanya dapat berupa string apa pun yang Anda pilih.
const evt = new CustomEvent("cart:add");
console.log(evt.type); // "cart:add"Mendistribusikannya
Picu peristiwa pada sasaran dengan dispatchEvent. Pendengar mana pun yang terdaftar untuk nama tersebut pada sasaran (atau leluhur, jika peristiwa merambat naik) akan dijalankan.
element.dispatchEvent(new CustomEvent("cart:add"));Mendengarkannya
Dengarkan persis seperti peristiwa bawaan menggunakan addEventListener dengan nama khusus Anda.
element.addEventListener("cart:add", () => {
console.log("Something was added to the cart");
});Meneruskan Data dengan Rincian
Lampirkan muatan melalui properti detail. Pendengar membacanya dari event.detail.
const evt = new CustomEvent("cart:add", {
detail: { id: 42, qty: 2 }
});
element.dispatchEvent(evt);Membaca Muatan
Di dalam pendengar, event.detail berisi apa pun yang Anda teruskan. Nilainya dapat berupa apa saja: objek, array, string, atau angka.
element.addEventListener("cart:add", (e) => {
console.log(e.detail.id, e.detail.qty); // 42 2
});Membuatnya Merambat Naik
Secara bawaan, peristiwa khusus tidak (NOT) merambat naik. Atur bubbles: true agar leluhur dan pendengar yang menggunakan delegasi dapat mendengarnya.
const evt = new CustomEvent("cart:add", {
bubbles: true,
detail: { id: 42 }
});
child.dispatchEvent(evt); // parents can now listenOpsi yang Dapat Dibatalkan
Atur cancelable: true agar pendengar dapat memanggil preventDefault(). Pengirim memeriksa nilai yang dikembalikan oleh dispatchEvent untuk mengetahui apakah peristiwa tersebut dibatalkan.
const evt = new CustomEvent("form:submit", { cancelable: true });
const proceed = form.dispatchEvent(evt);
if (proceed) actuallySubmit();Pola Pelepasan Ketergantungan
Peristiwa khusus memungkinkan modul berkomunikasi tanpa saling mengimpor. Pencatat atau lapisan analitik dapat mendengarkan pada document untuk peristiwa yang berlaku di seluruh aplikasi.
document.addEventListener("user:login", (e) => {
analytics.track("login", e.detail.userId);
});
document.dispatchEvent(
new CustomEvent("user:login", { detail: { userId: 7 } })
);Konvensi Penamaan
Beri ruang nama pada nama peristiwa Anda (seperti cart:add, user:login) untuk menghindari benturan dengan peristiwa bawaan dan mengelompokkan peristiwa yang berkaitan dengan jelas.
Sintaks Lama vs Baru
Anda mungkin melihat API lama document.createEvent dalam kode yang lebih lama. Pilih konstruktor modern new CustomEvent(...); bentuk ini lebih sederhana dan merupakan satu-satunya bentuk yang sebaiknya Anda tulis saat ini.
const evt = new CustomEvent("ready", { detail: 1 });Pemeriksaan Singkat
Uji pengetahuan tentang peristiwa khusus.
Ringkasan
Gunakan new CustomEvent(name, { detail, bubbles, cancelable }) dan dispatchEvent untuk membuat peristiwa sendiri. Baca muatannya melalui event.detail, pilih perambatan naik untuk menggunakan delegasi, dan gunakan cancelable untuk tindakan yang dapat dibatalkan. Peristiwa khusus memisahkan komponen menjadi gaya publikasikan-berlangganan yang rapi.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Peristiwa Khusus” gratis?
Ya — teks lengkap “Peristiwa Khusus” 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 “Peristiwa Khusus”?
Buat dan kirim peristiwa Anda sendiri. 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 4 dari 4.
Berapa lama pelajaran “Peristiwa Khusus” 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.