Mengapakah `ini` tidak berkelakuan seperti yang diharapkan dalam fungsi anak panah dalam pengendalian acara?

Memahami Gelagat Fungsi Anak Panah dengan Pengendalian Acara dalam Javascript

Apabila menggunakan fungsi anak panah sebagai panggilan balik dalam pengendalian acara, adalah penting untuk mempertimbangkan perbezaan antara ini dan acara.currentTarget. Dalam fungsi anak panah, ini merujuk kepada konteks di mana fungsi ditakrifkan, bukan di mana ia digunakan. Oleh itu, untuk mengakses elemen yang pengendali terikat, anda perlu menggunakan event.currentTarget dan bukannya ini.

Perbezaan antara event.currentTarget dan event.target

Memahami perbezaan antara event.currentTarget dan event.target adalah penting dalam menggelegak dan menangkap acara. event.currentTarget mewakili elemen yang mempunyai pendengar acara dilampirkan, manakala event.target menandakan elemen yang pada mulanya mencetuskan acara.

Menurut dokumentasi: "currentTarget jenis EventTarget, baca sahaja. Digunakan untuk menunjukkan EventTarget yang EventListeners sedang diproses ini amat berguna semasa menangkap dan menggelegak."

Contoh: Penyebaran Acara dengan Bubbling dan Capturing

Dalam coretan kod yang diberikan , perbezaan antara menggunakan ini dan acara.currentTarget dalam pengendalian acara digambarkan:

<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 peristiwa berlaku, ia merambat melalui DOM, bermula dari elemen sasaran dan bergerak ke atas pokok ke akar. Semasa proses ini, event.target menunjukkan elemen yang mencetuskan acara pada setiap peringkat, manakala event.currentTarget mewakili elemen yang mempunyai pendengar acara dilampirkan padanya.

Ringkasan

Untuk memastikan pengendalian acara yang betul dengan fungsi anak panah, adalah penting untuk memahami perbezaan antara ini dan acara.currentTarget. Menggunakan event.currentTarget membolehkan anda mengakses elemen yang dikaitkan dengan pendengar acara, tanpa mengira konteks di mana fungsi anak panah ditakrifkan.

Atas ialah kandungan terperinci Mengapakah `ini` tidak berkelakuan seperti yang diharapkan dalam fungsi anak panah dalam pengendalian acara?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!