Tutorial ini meneroka cara membuat elemen HTML dalam kelas JavaScript dan mengikat peristiwa kepadanya untuk memanggil kaedah ahli kelas itu sendiri. Fokus pada menyelesaikan masalah kehilangan konteks `ini 'dalam atribut tradisional` onclick`. Adalah disyorkan untuk menggunakan `AddEventListener` digabungkan dengan fungsi anak panah untuk memastikan bahawa` ini` dalam pengendali acara dengan betul menunjuk kepada contoh kelas dan merealisasikan enkapsulasi dan penyerahan logik fungsional.

Apabila membina aplikasi web yang kompleks, kita sering perlu menjana unsur -unsur HTML secara dinamik di dalam kelas JavaScript dan menambah logik interaktif kepada unsur -unsur ini. Keperluan umum ialah apabila pengguna berinteraksi dengan unsur -unsur yang dihasilkan secara dinamik (seperti mengklik butang), mereka boleh memanggil kaedah kelas yang elemen itu milik mengendalikan logik perniagaan. Walau bagaimanapun, dengan menggunakan atribut onclick elemen HTML secara langsung dan cuba memanggil kaedah kelas melalui kata kunci ini sering menemui masalah yang salah dalam konteks ini.

Analisis Masalah: Perangkap Konteks ini

Pertimbangkan kod contoh berikut, yang cuba membuat butang dalam pembina kelas kereta dan menggunakan atribut onclick sejajar untuk memanggil kaedah kelas dosomething:

 const myelm = document.getElementById ("myelm");

kereta kelas {
  pembina (myelm) {
    myelm.innerHtml = `
      <butang jenis="butang" onclick="this.dosomething ('hello world')"> klik saya </butang>
    `;
  }

  Dosomething (x) {
    console.log (x);
  }
}

const MyCart = Cart baru (myelm);

<div id="myelm"> </div>

Apabila pengguna mengklik butang ini, konsol akan melaporkan ralat yang menunjukkan bahawa ini. Ini kerana dalam atribut onclick dalam talian dalam HTML, konteks ini biasanya menunjuk kepada elemen DOM itu sendiri yang mencetuskan peristiwa (iaitu elemen butang), bukan contoh kelas kereta yang kami harapkan. Oleh itu, tidak ada kaedah yang dinamakan Dosomething pada elemen butang.

Penyelesaian: Fungsi AddEventListener dan anak panah

Untuk mengaitkan pengendali acara dengan betul dengan kaedah kelas dan pastikan kata kunci ini selalu menunjuk kepada contoh kelas, kita harus menggunakan kaedah AddEventListener dan menggabungkannya dengan fungsi anak panah untuk menentukan pengendali acara.

AddEventListener adalah kaedah mengikat peristiwa standard dan disyorkan dalam JavaScript, yang membolehkan kami menambah satu atau lebih pendengar acara kepada elemen DOM. Ciri -ciri fungsi anak panah terletak pada skop leksikal yang mengikat ini: ia tidak mencipta konteksnya sendiri, tetapi mewarisi ini dari skop luaran apabila ditakrifkan. Dalam kaedah kelas, ini bermakna bahawa ini di dalam fungsi anak panah akan sentiasa menunjuk kepada contoh kelas.

Berikut adalah contoh kod yang lebih baik menggunakan fungsi AddEventListener dan anak panah:

 const myelm = document.getElementById ("myelm");

kereta kelas {
  pembina (myelm) {
    // 1. Buat elemen butang html biarkan btn = document.createeelement ('butang');
    btn.innerHtml = 'klik saya';

    // 2. Gunakan addEventListener untuk mengikat acara klik // Pengendali acara adalah fungsi anak panah btn.addeventListener ('klik', () => {
      // Dalam fungsi anak panah, 'ini' terikat secara leksikal ke skop luar apabila ia ditakrifkan // pada masa ini 'ini' dengan betul menunjuk kepada contoh kelas kereta ini.
    });

    // 3. Tambahkan butang ke dom myelm.append (btn);
  }

  Dosomething (x) {
    console.log (x);
  }
}

const MyCart = Cart baru (myelm);

<div id="myelm"> </div>

Analisis Kod:

• Document.CreateElement ('Button'): Secara dinamik mencipta elemen butang baru.
• btn.innerHtml = 'klik saya': Tetapkan teks paparan butang.
• btn.addeventListener ('klik', () => {...}): Tambah pendengar acara klik untuk butang. Parameter kedua adalah fungsi anak panah yang bertindak sebagai panggilan balik yang akan dilaksanakan apabila acara itu dicetuskan.
• This.dosomething ('Hello World'): Di dalam fungsi anak panah, ini menunjukkan contoh kelas kereta api semasa, jadi kaedah dosomethingnya boleh dipanggil dengan betul.
• Myelm.Append (BTN): Menambah elemen butang yang baru dibuat ke bekas DOM yang ditentukan.

Perkara yang perlu diperhatikan dan amalan terbaik

1. Elakkan pengendali acara sebaris: Cuba elakkan menggunakan pengendali acara sebaris seperti onclick = "someFunction ()" dalam tag HTML. Ini bukan sahaja menyebabkan gandingan kod HTML dan JavaScript, mengurangkan kebolehkerjaan, tetapi juga cenderung menyebabkan masalah konteks ini.
2. Memahami konteks ini: Adalah penting untuk mempunyai pemahaman yang mendalam tentang peraturan mengikat kata kunci ini dalam JavaScript. Ia bergantung kepada konteks di mana fungsi dipanggil, bukan di mana fungsi ditakrifkan (kecuali fungsi anak panah).
3. Delegasi Acara: Untuk sejumlah besar unsur -unsur yang dihasilkan secara dinamik yang perlu terikat pada acara yang sama, anda boleh mempertimbangkan menggunakan delegasi acara. Mengikat pendengar acara ke elemen induk biasa mereka, dan kemudian gunakan peristiwa yang menggelegak dan acara.
4. Keluarkan pendengar acara: Jika elemen yang dihasilkan secara dinamik akan dikeluarkan atau diganti, dan pendengar acaranya tidak lagi diperlukan, untuk mengelakkan kebocoran ingatan, pembuanganEventListener harus digunakan untuk menghapuskan pendengar acara secara eksplisit.

Meringkaskan

Apabila mewujudkan unsur -unsur HTML secara dinamik dalam kelas JavaScript dan peristiwa mengikat untuk memanggil kaedah kelas, terasnya terletak dengan betul mengendalikan konteks ini. Dengan menggunakan document.createelement untuk membuat unsur -unsur dan menggabungkan addeventlistener dengan fungsi anak panah untuk mengikat peristiwa, kita dapat memastikan bahawa ini dalam pengendali acara selalu menunjuk kepada contoh kelas, dengan itu mencapai logik kod yang jelas, dapat dipelihara dan berfungsi dengan baik. Pendekatan ini adalah amalan standard dalam pembangunan JavaScript moden untuk mengendalikan interaksi UI dinamik.

Atas ialah kandungan terperinci Buat elemen HTML dalam kelas JavaScript dan mengikat peristiwa dengan betul untuk memanggil kaedah kelas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!