JavaScript: Memahami CustomEvent dan dispatchEvent

Pada artikel ini, saya akan mencoba menjelaskan bagaimana kita dapat membuat dan mengirimkan event menggunakan Event, CustomEventconstructor dan dispatchEvent()method. Kita juga akan mengeksplorasi bagaimana dan untuk tujuan apa custom event dan dispatchEvent digunakan dalam proyek kita.

Saya harap Anda dapat membuat acara khusus di akhir artikel ini.

Jadi mari kita mulai!

Aplikasi web terdiri dari serangkaian acara dan kami dapat mengatakan bahwa acara ini adalah salah satu bagian terpenting dari aplikasi web.

Dalam beberapa kasus, peristiwa JavaScript default tidak memenuhi persyaratan kami. Misalnya, dalam aplikasi kami, kami menggunakan beberapa event khusus yang tidak tersedia di event JavaScript default untuk menambahkan notifikasi, menyegarkan beberapa data, dll. Kami akan melihatnya di sisa artikel ini.

Bagaimana kita bisa membuat acara khusus?

Ada dua cara untuk membuat acara khusus.

• Cara pertama adalah menggunakan konstruktor Acara .
• Cara kedua menggunakan konstruktor CustomEvent yang kita sukai.

Pembuat Acara

Anda dapat membuat acara khusus dengan konstruktor Acara sebagai berikut:

Harap diperhatikan bahwa nama acara tidak peka huruf besar-kecil. Begitu NOTIFICATION_ADD juga dengan Notification_Add atau notification_add .

const event = new Event('NOTIFICATION_ADD');

Seperti yang kami sebutkan di atas, jika kami ingin menambahkan lebih banyak data ke objek acara, kami dapat menggunakan konstruktor CustomEvent sebagai berikut:

const event = new CustomEvent('NOTIFICATION_ADD', { 
  detail: {
    title: 'Error!',
    message: 'There was a problem creating your account.'
  }
});

Nah, acara itu dibuat. Apa berikutnya? Tentu saja, kami ingin menggunakannya dalam proyek kami. Langkah terakhir untuk mengaktifkan event adalah memanggil metode dispatchEvent() . Itu menerima parameter acara di dalamnya yang merupakan objek Acara.

Mari saya tunjukkan sebuah contoh.

const event = new CustomEvent('NOTIFICATION_ADD', { 
  detail: {
    title: 'Error!',
    message: 'There was a problem creating your account.'
  }
});

// We are dispatching the our custom event here.
window.dispatchEvent(event);

// Let's say we have a handleAddNotification function inside our project like below
function handleAddNotification(e) {
  // logic here.
  
}

window.addEventListener('NOTIFICATION_ADD', handleAddNotification);

<button onclick="handleButtonClick()">
  Create my account
</button>
const event = new CustomEvent('NOTIFICATION_ADD', { 
  detail: {
    title: 'Error!',
    message: 'There was a problem creating your account.'
  }
});

function handleButtonClick(){
 window.dispatchEvent(event);
}

function handleAddNotification(e) {
  alert(e.detail.title + ' ' + e.detail.message);
}

window.addEventListener('NOTIFICATION_ADD', handleAddNotification);

Untuk tujuan apa dan di mana kita menggunakannya?

Sebelum Anda membaca, Anda mungkin ingin melihat artikel ini tentang micro frontend.

Di CicekSepeti, kami memiliki arsitektur micro frontend di sini dan memiliki komponen khusus seperti tombol, tooltip, notifikasi, kotak centang, dll., Dan beberapa fragmen. Terkadang diperlukan komunikasi antara komponen dan fragmen ini. Tepat pada titik ini, acara khusus membantu kami.

Jika berbicara tentang contoh, kami memiliki komponen notifikasi di remote dan ingin menampilkannya di salah satu halaman setelah beberapa transaksi.

Dalam hal ini, komponen notifikasi memiliki event listener bernama 'NOTIFICATION_ADD' dan halaman tersebut memiliki formulir pendaftaran. Saat pengguna menekan tombol daftar, kami membuat permintaan API dan kemudian menampilkan pesan bersulang sukses atau salah melalui metode dispatchEvent dan konstruktor acara khusus.

Berkat pendengar acara pada komponen notifikasi, kami dapat memicu acara khusus kami yang telah ditentukan sebelumnya di proyek lain di mana pun dan kapan pun kami mau.

Ringkasan

Menggunakan peristiwa khusus JavaScript dapat meningkatkan pengalaman pengguna dan pengembangan aplikasi Anda bila digunakan dengan benar . Mulai sekarang, kami tahu bahwa kami dapat menggunakan peristiwa khusus saat peristiwa default JavaScript seperti peristiwa keyboard, peristiwa mouse, dll. Tidak memenuhi persyaratan kami.

Referensi