jQuery Academy · Pelajaran

Mencipta dan Mencetuskan Peristiwa Tersuai

Pelajaran 3 daripada 311 langkah

Mencipta dan Mencetuskan Peristiwa Tersuai ialah pelajaran jQuery Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 3. 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 jQuery Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus jQuery Academy merangkumi sejumlah 3 pelajaran.

Pengenalan kepada Peristiwa Tersuai

Selamat datang! Dalam pelajaran ini, anda akan belajar cara mencipta dan mengurus peristiwa tersuai anda sendiri dalam jQuery. Ini ialah cara yang berkuasa untuk menjadikan kod anda lebih teratur dan fleksibel.

Anggap peristiwa tersuai sebagai mesej khas yang boleh dihantar dan diterima oleh bahagian berlainan aplikasi web anda. Hal ini membantu bahagian-bahagian tersebut berkomunikasi tanpa dihubungkan secara langsung.

Mengapa Menggunakan Peristiwa Tersuai?

Mengapa perlu menggunakan peristiwa tersuai? Peristiwa ini membantu menyelesaikan masalah biasa: gandingan ketat. Apabila komponen digandingkan dengan ketat, perubahan pada satu bahagian kod mungkin merosakkan bahagian lain.

Penyahgandingan: Komponen tidak perlu mengetahui cara kerja dalaman satu sama lain.
Kod Lebih Kemas: Logik yang berkaitan dengan tindakan tertentu dipusatkan.
Fleksibiliti: Tambah atau alih keluar pendengar dengan mudah tanpa mengubah 'penghantar'.

Kaedah .trigger()

Untuk 'menghantar' atau 'mencetuskan' peristiwa tersuai, kita menggunakan kaedah .trigger() jQuery. Anda memanggilnya pada objek jQuery (sesuatu elemen atau document) dan menghantar nama peristiwa sebagai rentetan.

Nama peristiwa boleh menjadi apa-apa sahaja yang anda pilih, seperti 'dataLoaded' atau 'itemAdded'.

Demonstrasi Pencetusan Peristiwa

Mari lihat .trigger() dalam tindakan. Kita akan mencetuskan peristiwa tersuai bernama 'myCustomEvent' pada butang apabila butang itu diklik. Belum ada apa-apa berlaku kerana tiada sesiapa yang mendengar!

<!-- HTML assumed to be present -->
<button id="triggerButton">Trigger Event</button>

<script>
$(document).ready(function() {
  $('#triggerButton').on('click', function() {
    // Fire our custom event on the button itself
    $(this).trigger('myCustomEvent');
    console.log('myCustomEvent triggered!');
  });
});
</script>

Mendengar dengan .on()

Untuk 'menerima' atau 'mendengar' peristiwa tersuai, kita menggunakan kaedah .on() yang biasa. Sama seperti peristiwa terbina dalam (seperti 'click'), anda menentukan nama peristiwa dan fungsi yang akan dijalankan apabila peristiwa itu dicetuskan.

Anda boleh mendengar pada elemen yang sama yang mencetuskan peristiwa, pada elemen induk, atau pada document itu sendiri untuk peristiwa global.

Contoh Pencetusan dan Pendengaran

Sekarang, mari gabungkan .trigger() dan .on(). Klik butang tersebut dan anda akan melihat mesej muncul, menunjukkan bahawa peristiwa tersuai kita telah dicetuskan dan didengar!

<!-- HTML assumed to be present -->
<button id="myButton">Click Me</button>
<p id="statusMessage">Status: Waiting...</p>

<script>
$(document).ready(function() {
  // 1. Listen for 'buttonClicked' on the button
  $('#myButton').on('buttonClicked', function() {
    $('#statusMessage').text('Status: Custom event received!');
  });

  // 2. When the button is clicked, trigger 'buttonClicked'
  $('#myButton').on('click', function() {
    $(this).trigger('buttonClicked');
  });
});
</script>

Menghantar Data dengan Peristiwa

Peristiwa tersuai menjadi lebih berguna apabila anda boleh menghantar data bersamanya. Anda boleh menghantar argumen tambahan kepada .trigger() selepas nama peristiwa. Argumen ini akan dihantar kepada fungsi pengendali peristiwa anda.

Argumen pertama dalam pengendali sentiasa objek peristiwa.
Argumen seterusnya ialah data yang anda hantar dengan .trigger().

Demonstrasi Data Peristiwa Tersuai

Di sini, kita mencetuskan peristiwa 'dataReady' dan menghantar satu rentetan serta satu objek. Pendengar menerima data ini dan memaparkannya. Beginilah komponen berkongsi maklumat!

<!-- HTML assumed to be present -->
<button id="loadData">Load Data</button>
<p id="output"></p>

<script>
$(document).ready(function() {
  // Listen for 'dataReady' and extract the passed data
  $(document).on('dataReady', function(event, message, details) {
    const outputText = `Message: ${message}<br>Details: ${details.status} for ${details.item}`; 
    $('#output').html(outputText);
  });

  // When button clicked, trigger 'dataReady' with data
  $('#loadData').on('click', function() {
    const msg = 'Data successfully loaded!';
    const data = { status: 'complete', item: 'report' };
    $(document).trigger('dataReady', [msg, data]);
    console.log('Data event triggered!');
  });
});
</script>

Penyahgandingan untuk Aplikasi yang Lebih Baik

Menggunakan peristiwa tersuai untuk komunikasi membantu membina aplikasi yang lebih modular dan mudah diselenggara. Bayangkan komponen 'troli beli-belah' dan komponen 'paparan produk'.

Apabila sesuatu produk ditambahkan, 'paparan produk' mencetuskan 'productAdded'.
Komponen 'troli beli-belah' mendengar 'productAdded' dan mengemas kini dirinya.

Kedua-dua komponen tidak perlu mengetahui kaedah dalaman satu sama lain, sebaliknya hanya kontrak peristiwa.

Semak Pemahaman Anda

Pernyataan yang manakah berikut menerangkan manfaat atau penggunaan peristiwa tersuai dengan betul bersama .trigger() dan .on()?

Jawab dalam pelajaran interaktif

Imbas Kembali: Peristiwa Tersuai

Syabas! Anda telah belajar cara mencipta dan mengurus peristiwa tersuai dalam jQuery. Berikut ialah ringkasan ringkas:

Apakah: Peristiwa tersuai ialah mesej yang ditakrifkan pengguna untuk komponen aplikasi.
Mengapa: Peristiwa ini menggalakkan penyahgandingan, lalu menghasilkan kod yang lebih kemas dan fleksibel.
Bagaimana: Gunakan .trigger('eventName', [data]) untuk mencetuskan peristiwa.
Bagaimana: Gunakan .on('eventName', function(event, data) { ... }) untuk mendengar peristiwa.

Menguasai peristiwa tersuai ialah langkah penting untuk membina aplikasi jQuery yang kukuh dan mudah diskalakan!

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: 22
Pelajaran: 48

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Mencipta dan Mencetuskan Peristiwa Tersuai” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran jQuery Academy, termasuk “Mencipta dan Mencetuskan 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 jQuery Academy merangkumi sejumlah 3 pelajaran.

Apakah yang akan saya pelajari dalam “Mencipta dan Mencetuskan Peristiwa Tersuai”?

Reka dan laksanakan peristiwa tersuai menggunakan .trigger() dan .on() untuk mengasingkan komponen, menghasilkan kod yang lebih kemas dan membolehkan komunikasi fleksibel antara bahagian aplikasi yan… Anda berlatih jQuery Academy 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 jQuery Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran jQuery Academy 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 3 daripada 3.

Berapa lamakah pelajaran “Mencipta dan Mencetuskan 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 jQuery Academy ini?

Ya. Setiap pelajaran jQuery Academy 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

Melaksanakan Delegasi Peristiwa yang Kukuh
Menghentikan Penyebaran Peristiwa
Mencipta dan Mencetuskan Peristiwa Tersuai

← Kembali ke jQuery Academy