Mengapa menggunakan `event.currentTarget` dan bukannya `ini` di dalam fungsi anak panah dalam pengendali acara JavaScript?

.ini dalam Fungsi Anak Panah: Pertimbangan Pengendali Acara

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.

Memahami .currentTarget

Penggunaan acara.currentTarget berpunca daripada konsep menangkap dan menggelegak acara. Memahami mekanisme ini adalah penting untuk menavigasi pengendalian acara dengan berkesan dalam JavaScript.

• event.currentTarget mewakili elemen di mana pendengar acara ditakrifkan, dikenali sebagai sasaran acara.
• event.target menandakan elemen yang pada mulanya mencetuskan acara.

Acara menggelegak dan Menangkap

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.

• Event Bubbling: Peristiwa bergerak ke atas pepohon DOM, daripada elemen sasaran ke akar dokumen.
• Tangkapan Acara: Peristiwa bergerak ke bawah pepohon DOM, daripada akar dokumen ke elemen sasaran.

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.

Contoh: Membezakan .currentTarget dan .target

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!