Rumah > Artikel > hujung hadapan web > Mengapa menggunakan `event.currentTarget` dan bukannya `ini` di dalam fungsi anak panah dalam pengendali acara JavaScript?
Dalam bekerja dengan JavaScript, pembangun mungkin menghadapi cabaran apabila menggunakan fungsi anak panah dalam pengendali acara. Secara lalai, apabila fungsi anak panah digunakan dalam panggilan balik acara, mendapatkan ini untuk mewakili elemen yang pengendali acara terikat menjadi masalah. Ini berlaku kerana nilai ini dalam fungsi anak panah ditentukan semasa takrifannya dan bukannya pada masa penggunaannya.
Untuk menangani isu ini, adalah dinasihatkan untuk menggunakan event.currentTarget dan bukannya ini apabila menggunakan fungsi anak panah dalam panggilan balik. event.currentTarget secara konsisten menetapkan elemen DOM yang dikaitkan dengan pendengar acara yang sedang dilaksanakan, memastikan elemen yang diingini boleh dirujuk dengan tepat.
Penggunaan acara.currentTarget berpunca daripada konsep menangkap dan menggelegak acara. Memahami mekanisme ini adalah penting untuk menavigasi pengendalian acara dengan berkesan dalam JavaScript.
Semasa penyebaran peristiwa, tingkah laku penyemak imbas boleh dipengaruhi oleh penggunaan menangkap peristiwa dan menggelegak. Kedua-duanya melibatkan aliran peristiwa dalam pepohon DOM, tetapi dalam arah yang berbeza.
Dalam konteks pengendalian acara, perbezaan antara currentTarget dan sasaran menjadi jelas. Apabila acara diwakilkan kepada elemen induk dan mencetuskan peristiwa pada elemen anak, currentTarget kekal sebagai elemen induk, manakala sasaran merujuk kepada elemen anak. Perbezaan ini menjadi sangat penting apabila menangani elemen yang dicipta atau dimasukkan secara dinamik ke dalam DOM selepas pendengar acara dilampirkan.
Pertimbangkan coretan di bawah:
<code class="javascript">var parent = document.getElementById('parent'); parent.addEventListener('click', function(e) { document.getElementById('msg').innerHTML = "this: " + this.id + "<br>" + "currentTarget: " + e.currentTarget.id + "<br>" + "target: " + e.target.id; }); $('#parent').on('click', function(e) { $('#jQmsg').html("*jQuery<br>" + "this: " + $(this).prop('id') + "<br>currenTarget: " + $(e.currentTarget).prop('id') + "<br>target: " + $(e.target).prop('id')); }); $('#parent').on('click', e => $('#arrmsg').html('*Arrow function <br> currentTarget: ' + e.currentTarget.id));</code>
Apabila coretan ini dilaksanakan, mengklik pada elemen anak atau cucu mencetuskan peristiwa menggelegak. Tingkah laku yang terhasil ditunjukkan dalam jadual berikut:
Event Listener | this | currentTarget | target |
---|---|---|---|
function | child | parent | child/grand-child |
jQuery | parent | parent | child/grand-child |
Arrow function | undefined | parent | child/grand-child |
Seperti yang terbukti daripada jadual, ini kembali tidak ditentukan apabila fungsi anak panah digunakan, sebaliknya menyerlahkan keperluan untuk menggunakan event.currentTarget. Dengan menggunakan event.currentTarget, elemen yang betul sentiasa boleh dirujuk dalam fungsi anak panah, memastikan pengendalian acara berkesan dalam JavaScript.
Atas ialah kandungan terperinci Mengapa menggunakan `event.currentTarget` dan bukannya `ini` di dalam fungsi anak panah dalam pengendali acara JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!