Cara menggunakan EventTarget sebagai penghasil acara asli web – Beragampengetahuan

Misalkan Anda ingin menerapkan pola terbitkan/berlangganan di aplikasi front-end Anda untuk bereaksi terhadap perubahan data dan peristiwa. Pertama, Anda mungkin mencari pustaka penghasil peristiwa.

Saya telah menginstal banyak perpustakaan penghasil acara selama bertahun-tahun, menulisnya dari awal sebagai latihan pengkodean cepat jika menurut saya menguntungkan.

hari ini saya belajar vanilla JavaScript dengan penghasil acara asli, Saya telah menggunakannya secara tidak langsung. Tidak diperlukan kode tambahan!

Itu tepat di depan kami; setiap kali Anda menggunakan addEventListener Pada elemen DOM, Anda dapat berlangganan acara di dalamnya. Ini adalah emitor acara klasik. Dapatkah Anda menggunakan kembali fungsi ini entah bagaimana?

Saya selalu berpikir addEventListener ya bagian HTMLElementtapi anehnya tidak!

Dari mana metode itu berasal?

jika Anda memeriksa HTMLElement rantai prototipe, Anda akan menemukan bahwa itu diwarisi dari Element, Node Dan EventTarget.

bersyukur EventTarget antarmuka, Anda dapat berlangganan acara DOM elemen dengan addEventListener. definisi MDN EventTarget sebagai berikut:

setiap objek yang mewarisi dari EventTarget Menjadi Peluncur Acara!

Mari kita menginisialisasi yang baru EventTarget Lihat apa yang kami dapatkan.

const emitter = new EventTarget()

typeof emitter.addEventListener    
typeof emitter.removeEventListener 
typeof emitter.dispatchEvent       

emitter.addEventListener('YOLO', () => {
  console.log('YOLO');
})


emitter.dispatchEvent(new Event('YOLO'));

mudah digunakan EventTarget Berguna untuk logika sederhana, tetapi jika Anda perlu melakukan lebih dari mengirim acara, Anda mungkin ingin memasangkannya dengan logika kustom.

Misalnya, agar tampilan tetap mutakhir, Anda mungkin perlu menyimpan status dalam emitor peristiwa, mengubah status ini, dan merender ulang tampilan saat data berubah.

Untuk mencapai ini, gunakan sintaks kelas JS, memperluas EventTarget antarmuka dan pasangkan dengan logika aplikasi Anda.

Di bawah ini temukan penghasil acara “penyimpanan” sederhana yang menyimpan data dan memberi tahu pendengar ketika statusnya berubah.

export class MyEventEmitter extends EventTarget {
  #list;

  constructor(list = []) {
    super();
    this.#list = list;
  }

  getItems() {
    return this.#list;
  }

  addItem(item) {
    this.#list = [...this.#list, item];
    
    this.dispatchEvent(new Event("update"));
  }
}

EventTarget Ini hal yang keren! Saya ingin tahu apa permata antarmuka lain yang bersembunyi di browser kita. 🤔