Mengapakah \'ini\' Berkelakuan Berbeza dalam Fungsi Anak Panah Dalam Pengendali Acara?

Fungsi Anak Panah dan Pengikatan "ini" dalam Pengendali Acara

Apabila bekerja dengan fungsi anak panah ES6 JavaScript, pembangun mungkin menghadapi tingkah laku yang tidak dijangka apabila bergantung pada kata kunci "ini" dalam pengendali acara. Tidak seperti ungkapan fungsi tradisional, fungsi anak panah mewarisi konteks ini daripada skop sekelilingnya, bukan daripada konteks di mana ia dipanggil.

Masalahnya: undefined $(this)

Dalam coretan kod yang disediakan, pendekatan fungsi anak panah mengikat "ini" kepada konteks global (objek tetingkap) dan bukannya elemen yang dimaksudkan yang dilampirkan pada pendengar acara. Akibatnya, $(this) mengembalikan tidak ditentukan kerana tiada objek jQuery yang sepadan dalam konteks global.

Penyelesaian: Gunakan event.currentTarget

Untuk menyelesaikan isu ini dan dapatkan rujukan elemen yang betul, adalah disyorkan untuk menggunakan event.currentTarget dalam pengendali acara. Tidak seperti "ini", event.currentTarget sentiasa merujuk kepada elemen DOM yang sedang dikendalikan oleh pendengar acara.

Contoh menggunakan event.currentTarget

Berikut ialah coretan kod yang diubah suai dengan pembetulan acara.currentTarget:

<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

Untuk memahami pengendalian acara dengan lebih baik, adalah penting untuk mengambil perhatian perbezaan antara acara.currentTarget dan acara.sasaran.

• event.currentTarget: Mewakili elemen yang mana pendengar acara dilampirkan.
• event.target: Mewakili elemen yang pada mulanya mencetuskan acara.

Dalam konteks menggelegak acara, event.currentTarget kekal sama sepanjang proses penyebaran, manakala event.target berubah mengikut elemen yang sedang dikendalikan acara.

Kesimpulan

Fungsi anak panah menyediakan sintaks ringkas dalam JavaScript, tetapi adalah penting untuk mengingati gelagat skop unik mereka apabila bekerja dengan "ini" dalam pengendali acara. Dengan memanfaatkan event.currentTarget, pembangun boleh mengakses elemen DOM yang sesuai secara konsisten dan mengendalikan acara dengan berkesan dalam aplikasi JavaScript mereka.

Atas ialah kandungan terperinci Mengapakah 'ini' Berkelakuan Berbeza dalam Fungsi Anak Panah Dalam Pengendali Acara?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!