Bagaimanakah `ini` berkelakuan dalam fungsi anak panah yang digunakan sebagai pengendali acara dalam JavaScript?

Javascript - anak panah berfungsi ini dalam pengendali acara

Dalam ES6, terdapat konsep baharu fungsi anak panah yang menawarkan ringkas dan lebih bersih cara untuk menentukan fungsi. Walau bagaimanapun, apabila menggunakan fungsi anak panah sebagai panggil balik dalam pengendali acara, memahami gelagat ini menjadi penting.

Masalahnya

Dalam kod yang disediakan, acara. sifat currentTarget tidak digunakan dan fungsi anak panah kembali tidak ditentukan apabila mengklik pada elemen.

ini dalam Fungsi Anak Panah

Tidak seperti fungsi biasa, nilai dalam ini fungsi anak panah ditentukan oleh tempat fungsi anak panah ditakrifkan, bukan di mana ia digunakan. Dalam contoh yang disediakan, fungsi anak panah ditakrifkan dalam konteks fungsi yang lebih besar, yang boleh membawa kepada tingkah laku yang tidak dijangka.

Penyelesaian

Untuk menangani perkara ini isu, bukannya mengakses ini, event.currentTarget harus digunakan untuk mendapatkan elemen yang pengendali terikat. event.currentTarget sentiasa merujuk kepada elemen DOM yang EventListeners sedang diproses. Begini cara kod itu boleh 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

Satu lagi perbezaan penting yang perlu diperhatikan ialah kelakuan acara.currentTarget dan acara .sasaran dalam konteks menggelegak dan menangkap peristiwa.

• currentTarget: Mewakili elemen yang mempunyai pendengar acara yang dilampirkan padanya.
• sasaran : Mewakili elemen yang mencetuskan acara.

Apabila berurusan dengan elemen bersarang dan penyebaran peristiwa, menggunakan event.currentTarget memastikan elemen yang betul sentiasa dirujuk.

< ;h3>Contoh

Coretan yang disediakan menunjukkan perbezaan antara ini, event.currentTarget dan event.target. Dengan mengklik pada elemen yang berbeza, output menunjukkan cara nilai setiap sifat berubah berdasarkan elemen yang dicetuskan dan konteks pendengar acara.

Atas ialah kandungan terperinci Bagaimanakah `ini` berkelakuan dalam fungsi anak panah yang digunakan sebagai pengendali acara dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!