Bagaimana Anda Mengendalikan Rujukan \"ini\" dalam Pendengar Acara Apabila Berurusan dengan Elemen Dinamik?

Mengendalikan Rujukan "ini" dalam Pendengar Acara

Dalam pengaturcaraan berorientasikan objek, kata kunci "ini" merujuk kepada objek yang kaedah sedang digunakan. Walau bagaimanapun, apabila menggunakan addEventListener untuk mengendalikan acara pada elemen yang dipaparkan secara dinamik, rujukan "ini" boleh menjadi bermasalah.

Isunya

Seperti yang dinyatakan dalam kod yang disediakan, apabila pendengar acara dilampirkan pada sel menggunakan addEventListener, rujukan "ini" dalam fungsi pengendali merujuk kepada elemen yang diklik dan bukannya contoh objek yang mencipta jadual. Ini menjadikan ia mencabar untuk mengakses sifat dan kaedah objek dari dalam pengendali acara.

Penyelesaian: Bind atau handleEvent

Satu penyelesaian kepada isu ini ialah menggunakan bind, yang membolehkan anda menentukan nilai untuk digunakan sebagai "ini" untuk semua panggilan ke fungsi tertentu. Dengan mengikat fungsi pengendali peristiwa pada contoh objek, anda memastikan bahawa rujukan "ini" dalam fungsi pengendali kekal konsisten.

Contoh menggunakan bind:

<code class="javascript">cell1.addEventListener("click", this.handleCellClick.bind(this), false);</code>

Pendekatan alternatif ialah dengan melaksanakan fungsi handleEvent, yang direka untuk menangkap dan mengendalikan sebarang peristiwa dalam objek. Dengan mengatasi kaedah handleEvent, anda boleh menentukan gelagat untuk semua jenis acara pada objek.

Contoh menggunakan handleEvent:

<code class="javascript">ticketTable.prototype.handleEvent = function(event) {
  if (event.type === "click") {
    console.log(this.tickets.length); // Accesses the array property
  }
};

cell1.addEventListener("click", this, false);</code>

Mengalih keluar Pendengar Acara

Perlu ambil perhatian bahawa apabila menggunakan bind, mungkin sukar untuk mengalih keluar pendengar acara dengan betul. Sebaliknya, pertimbangkan untuk menggunakan kaedah handleEvent atau pustaka pihak ketiga yang menyokong pembersihan pendengar acara.

Ringkasnya, menggunakan mengikat atau melaksanakan handleEvent membolehkan anda mengawal rujukan "ini" dalam pengendali acara, membolehkan anda melakukan dengan betul akses sifat dan kaedah objek. Pembersihan pendengar acara yang betul juga penting untuk mengekalkan kecekapan ingatan.

Atas ialah kandungan terperinci Bagaimana Anda Mengendalikan Rujukan \"ini\" dalam Pendengar Acara Apabila Berurusan dengan Elemen Dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!