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

Susan Sarandon
Lepaskan: 2024-10-30 07:08:02
asal
416 orang telah melayarinya

How does `this` behave in arrow functions used as event handlers in 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>
Salin selepas log masuk

.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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!