jQuery Academy · Pelajaran

Membuat dan Memicu Peristiwa Kustom

Rancang dan terapkan peristiwa kustom menggunakan .trigger() dan .on() untuk memisahkan komponen, menghasilkan kode yang lebih rapi, dan memungkinkan komunikasi yang fleksibel antarbagian aplikasi.

Membuat dan Memicu Peristiwa Kustom adalah pelajaran jQuery Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 3. 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 jQuery Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus jQuery Academy mencakup 3 pelajaran total.

Pengantar Peristiwa Kustom

Selamat datang! Dalam pelajaran ini, Anda akan mempelajari cara membuat dan mengelola peristiwa kustom Anda sendiri dalam jQuery. Ini adalah cara yang ampuh untuk membuat kode Anda lebih teratur dan fleksibel.

Anggaplah peristiwa kustom sebagai pesan khusus yang dapat dikirim dan diterima oleh berbagai bagian aplikasi web Anda. Hal ini membantu bagian-bagian tersebut berkomunikasi tanpa terhubung secara langsung.

Mengapa Menggunakan Peristiwa Kustom?

Mengapa menggunakan peristiwa kustom? Peristiwa ini membantu mengatasi masalah umum: keterikatan erat. Ketika komponen saling terikat erat, perubahan pada satu bagian kode Anda dapat merusak bagian lainnya.

Pemisahan keterikatan: Komponen tidak perlu mengetahui cara kerja internal satu sama lain.
Kode lebih rapi: Logika yang berkaitan dengan tindakan tertentu dipusatkan.
Fleksibilitas: Tambahkan atau hapus listener dengan mudah tanpa mengubah "pengirimnya".

Metode .trigger()

Untuk "mengirim" atau "memicu" peristiwa kustom, kita menggunakan metode .trigger() milik jQuery. Anda memanggilnya pada objek jQuery (sebuah elemen atau document) dan meneruskan nama peristiwa sebagai string.

Nama peristiwa dapat berupa apa saja yang Anda pilih, seperti 'dataLoaded' atau 'itemAdded'.

Demo Pemicu Peristiwa

Mari kita lihat .trigger() dalam praktik. Kita akan memicu peristiwa kustom bernama 'myCustomEvent' pada sebuah tombol ketika tombol itu diklik. Belum ada yang terjadi karena belum ada yang mendengarkan!

<!-- 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>

Mendengarkan dengan .on()

Untuk "menerima" atau "mendengarkan" peristiwa kustom, kita menggunakan metode .on() yang sudah dikenal. Sama seperti pada peristiwa bawaan (seperti 'click'), Anda menentukan nama peristiwa dan fungsi yang akan dijalankan ketika peristiwa tersebut dipicu.

Anda dapat mendengarkan pada elemen yang sama dengan elemen pemicu peristiwa, pada elemen induk, atau bahkan pada document itu sendiri untuk peristiwa global.

Contoh Pemicu & Pendengar

Sekarang, mari kita gabungkan .trigger() dan .on(). Klik tombol tersebut, dan Anda akan melihat pesannya muncul, yang menunjukkan bahwa peristiwa kustom kita telah dipicu dan diterima!

<!-- 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>

Meneruskan Data dengan Peristiwa

Peristiwa kustom bahkan lebih berguna ketika Anda dapat meneruskan data bersamanya. Anda dapat mengirim argumen tambahan ke .trigger() setelah nama peristiwa. Argumen ini akan diteruskan ke fungsi penangan peristiwa Anda.

Argumen pertama dalam penangan selalu berupa objek peristiwa.
Argumen berikutnya adalah data yang Anda teruskan dengan .trigger().

Demo Data Peristiwa Kustom

Di sini, kita memicu peristiwa 'dataReady' dan meneruskan sebuah string serta sebuah objek. Listener menerima data ini dan menampilkannya. Beginilah cara komponen berbagi informasi!

<!-- 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>

Pemisahan Keterikatan untuk Aplikasi yang Lebih Baik

Menggunakan peristiwa kustom untuk komunikasi membantu membangun aplikasi yang lebih modular dan mudah dipelihara. Bayangkan sebuah komponen "keranjang belanja" dan komponen "tampilan produk".

Ketika sebuah produk ditambahkan, "tampilan produk" memicu 'productAdded'.
Komponen "keranjang belanja" mendengarkan 'productAdded' dan memperbarui dirinya sendiri.

Tidak satu pun komponen perlu mengetahui metode internal komponen lainnya, hanya kontrak peristiwanya.

Periksa Pemahaman Anda

Pernyataan manakah berikut ini yang secara tepat menjelaskan manfaat atau penggunaan peristiwa kustom dengan .trigger() dan .on()?

Ringkasan: Peristiwa Kustom

Kerja bagus! Anda telah mempelajari cara membuat dan mengelola peristiwa kustom dalam jQuery. Berikut ringkasan singkatnya:

Apa: Peristiwa kustom adalah pesan yang ditentukan pengguna untuk komponen aplikasi.
Mengapa: Peristiwa ini mendorong pemisahan keterikatan, sehingga menghasilkan kode yang lebih rapi dan fleksibel.
Bagaimana: Gunakan .trigger('eventName', [data]) untuk memicu peristiwa.
Bagaimana: Gunakan .on('eventName', function(event, data) { ... }) untuk mendengarkan peristiwa.

Menguasai peristiwa kustom adalah langkah penting untuk membangun aplikasi jQuery yang tangguh dan mudah diskalakan!

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Membuat dan Memicu Peristiwa Kustom” gratis?

Ya — teks lengkap “Membuat dan Memicu Peristiwa Kustom” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus jQuery Academy, upgrade ke CoddyKit PRO. Kursus jQuery Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Membuat dan Memicu Peristiwa Kustom”?

Rancang dan terapkan peristiwa kustom menggunakan .trigger() dan .on() untuk memisahkan komponen, menghasilkan kode yang lebih rapi, dan memungkinkan komunikasi yang fleksibel antarbagian aplikasi. Kamu berlatih jQuery 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 jQuery Academy?

Tidak diperlukan pengalaman sebelumnya. jQuery 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 3 dari 3.

Berapa lama pelajaran “Membuat dan Memicu Peristiwa Kustom” 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 jQuery Academy ini?

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

Menerapkan Delegasi Peristiwa yang Tangguh
Menghentikan Propagasi Peristiwa
Membuat dan Memicu Peristiwa Kustom

← Kembali ke jQuery Academy