currentTarget vs. sasaran dalam Acara JavaScript: Apakah Perbezaannya?

currentTarget vs. target dalam Acara JavaScript: Membongkar Perbezaan

Dalam bidang pengendalian acara JavaScript, memahami perbezaan antara Sasaran semasa dan sifat sasaran adalah penting. Mari kita menyelami perbezaan mereka dengan bantuan contoh.

Meneroka Harta sasaran

Harta sasaran mewakili elemen yang mencetuskan acara secara langsung. Pertimbangkan senario berikut:

const button = document.querySelector('button');

button.addEventListener('click', (e) => {
  console.log(e.target); // Logs the button element clicked
});

Dalam contoh ini, apabila butang diklik, e.target akan merujuk butang itu sendiri, kerana ia adalah elemen yang memulakan acara klik.

Memperkenalkan Harta Sasaran semasa

Sementara sasaran menghala ke acara pemula, currentTarget mewakili elemen yang pengendali acara dilampirkan. Mari kita ubah suai kod kami yang terdahulu:

const wrapper = document.querySelector('.wrapper');

wrapper.addEventListener('click', (e) => {
  console.log(e.currentTarget); // Logs the wrapper div
});

Dalam kes ini, e.currentTarget akan merujuk div pembalut, walaupun acara klik berasal daripada butang di dalamnya. Ini kerana pendengar acara dilampirkan pada pembungkus, menjadikannya elemen kawalan.

Memilih Harta Yang Tepat: Panduan Berasaskan Senario

• Gunakan sasaran apabila: Anda perlu mengakses maklumat tentang elemen yang disebabkan oleh непосредственно acara.
• Gunakan currentTarget apabila: Anda mahu bekerja dengan elemen yang pengendali acara dilampirkan, tidak kira dari mana acara itu berasal dalam hierarki elemen tersebut.

Atas ialah kandungan terperinci currentTarget vs. sasaran dalam Acara JavaScript: Apakah Perbezaannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!