Pengendalian Acara JavaScript: Apakah Perbezaan Antara `currentTarget` dan `target`?

JavaScript: Mendedahkan Perbezaan Antara CurrentTarget dan Sifat Sasaran dalam Pengendalian Acara

Dalam bidang pengendalian acara JavaScript, sifat Sasaran dan sasaran semasa memegang peranan yang berbeza dalam memahami penyebaran peristiwa mekanisme.

Definisi:

• sasaran: Mewakili elemen segera yang memulakan acara. Ini lazimnya elemen tempat tindakan pencetus bermula, seperti klik atau tuding.
• currentTarget: Merujuk kepada elemen tempat pendengar acara dilampirkan. Ia menunjukkan elemen semasa dalam laluan gelembung acara.

Peristiwa menggelegak dan Menangkap:
Acara mengikut gelagat menggelegak lalai dalam JavaScript. Ini bermakna peristiwa yang dicetuskan pada elemen dalaman akan menyebarkan (gelembung) pokok DOM kepada nenek moyangnya.

Peranan Sifat:
Semasa penyebaran peristiwa, kedua-dua Sasaran semasa dan sasaran berikan maklumat berharga:

• sasaran: Mengenal pasti elemen yang pada asalnya menyebabkan peristiwa itu, tanpa mengira fasa penyebaran.
• Sasaran semasa: Mengemas kini secara dinamik apabila acara menggelembungkan hierarki DOM. Ia menunjuk kepada elemen di mana pendengar acara sedang dikendalikan.

Senario dan Kes Penggunaan:

• Acara Kawalan Penyebaran:

  • Dengan menangkap acara dalam elemen induk (menangkap peristiwa), currentTarget akan sentiasa merujuk kepada induk, manakala sasaran akan menunjukkan elemen anak yang mencetuskan acara.
  • Dengan menggelegak acara ke objek dokumen (event bubbling), kedua-dua currentTarget dan sasaran akan diselaraskan dengan elemen yang sama sepanjang perambatan.

• Elemen Pengasingan:

  • Menggunakan currentTarget, pengendalian acara boleh diasingkan kepada elemen tertentu dengan melampirkan pendengar pada elemen induk mereka. Elemen yang memulakan acara masih boleh dikenal pasti melalui sifat sasaran.

Contoh:

const parent = document.querySelector(".parent");
parent.addEventListener("click", (event) => {
  console.log("currentTarget:", event.currentTarget); // Parent element
  console.log("target:", event.target); // Clicked child element
});

Atas ialah kandungan terperinci Pengendalian Acara JavaScript: Apakah Perbezaan Antara `currentTarget` dan `target`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!