Mengapakah `ini` berkelakuan di luar jangkaan apabila menggunakan fungsi anak panah dalam pengendali acara?

JavaScript - Fungsi Anak Panah dan Pengendali Acara

Apabila menggunakan fungsi anak panah sebagai panggilan balik untuk pengendali acara, nilai ini dalam fungsi adalah tidak dijangka. Catatan blog ini menerangkan sebab di sebalik tingkah laku ini dan menyediakan penyelesaian untuk mengakses elemen yang dimaksudkan menggunakan event.currentTarget.

Fungsi Anak Panah dan Skop Leksikal

Tidak seperti fungsi biasa, fungsi anak panah tidak mempunyai konteks atau skop sendiri untuk ini. Sebaliknya, mereka mewarisi skop leksikal konteks sekeliling mereka. Dalam contoh yang diberikan, fungsi anak panah ditakrifkan dalam pengendali acara klik dom.videoLinks. Oleh itu, ini dalam fungsi anak panah merujuk kepada elemen dom.videoLinks.

Pendengar Acara dan acara.currentTarget

Pendengar acara dilampirkan pada elemen tertentu dan dilaksanakan apabila peristiwa tertentu berlaku. Apabila peristiwa dicetuskan, objek acara mengandungi maklumat tentang elemen sasaran yang mencetuskan acara dan elemen sasaran semasa yang mempunyai pendengar acara dilampirkan padanya.

Harta acara.target merujuk kepada elemen yang secara langsung mencetuskan peristiwa itu. Dalam kebanyakan kes, ini ialah elemen yang telah diklik, dilegarkan atau menerima fokus.

Harta acara.currentTarget, sebaliknya, merujuk kepada elemen yang mempunyai pendengar acara dilampirkan padanya. Ini ialah elemen yang acara sedang diproses pada masa pelaksanaan.

Menggunakan event.currentTarget dalam Fungsi Anak Panah

Untuk mengakses elemen yang dimaksudkan dalam pengendali acara fungsi anak panah, gunakan acara .currentTarget bukannya ini. Berikut ialah versi kod yang diubah suai:

<code class="javascript">dom.videoLinks.click((e) => {
  e.preventDefault();
  console.log($(e.currentTarget));
  var self = $(e.currentTarget),
      url = self.attr(configuration.attribute);

  eventHandlers.showVideo(url);

  // Deactivate any active video thumbs
  dom.videoLinks.filter('.video-selected').removeClass('video-selected');

  // Activate selected video thumb
  self.addClass('video-selected');
});</code>

.currentTarget vs .target

Secara umum, event.currentTarget harus digunakan berbanding event.target apabila bekerja dengan pengendali acara. Ini kerana peristiwa boleh menggelembung atau menangkap pepohon DOM dan menggunakan event.target mungkin tidak selalu merujuk kepada elemen yang anda ingin sasarkan.

event.currentTarget secara konsisten merujuk kepada elemen yang mempunyai pendengar acara dilampirkan padanya, tanpa mengira aliran acara.

Kesimpulan

Apabila menggunakan fungsi anak panah dalam pengendali acara, ingat untuk menggunakan event.currentTarget untuk mengakses elemen yang dimaksudkan. Perlu diingat perbezaan antara event.target dan event.currentTarget apabila bekerja dengan menggelegak acara dan menangkap untuk memastikan pengendalian acara yang tepat.

Atas ialah kandungan terperinci Mengapakah `ini` berkelakuan di luar jangkaan apabila menggunakan fungsi anak panah dalam pengendali acara?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!