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

Membezakan Antara Sasaran semasa dan Sifat sasaran dalam Acara JavaScript

Apabila mengendalikan acara dalam JavaScript, adalah penting untuk memahami perbezaan antara Sasaran semasa dan sasaran harta benda. Sifat ini memberikan cerapan berharga tentang mekanisme penyebaran acara dan memainkan peranan penting dalam pelbagai senario.

Penyebaran Peristiwa dan Perbezaan Harta

Secara lalai, acara dalam JavaScript mengikuti menggelegak model penyebaran. Ini bermakna peristiwa berasal daripada elemen tertentu dan merambat ke atas melalui elemen induknya sehingga ia mencapai objek dokumen. Semasa penyebaran ini, sifat sasaran merujuk kepada elemen yang pada mulanya mencetuskan acara, manakala sifat currentTarget mengenal pasti elemen yang dilampirkan oleh pendengar acara.

Contoh

Pertimbangkan dokumen HTML yang mengandungi dua div bersarang:

<div>

Sekarang, kami melampirkan pendengar acara pada div luar:

document.getElementById("div-container").addEventListener("click", function(event) {
  console.log(`Target: ${event.target.id}, CurrentTarget: ${event.currentTarget.id}`);
});

Jika kami mengklik pada div dalam, kedua-dua sifat sasaran dan currentTarget akan mengeluarkan "div-dalam", yang menunjukkan bahawa acara itu berasal dari div dalam . Walau bagaimanapun, jika kita mengklik pada div luar, sifat currentTarget masih akan mengeluarkan "bekas div" kerana pendengar acara dilampirkan pada div luar, manakala sifat sasaran akan menjadi batal kerana acara klik tidak dicetuskan secara langsung pada bahagian luar div.

Kes Penggunaan

Kegunaan sasaran:

• Mengenal pasti elemen khusus yang menyebabkan peristiwa
• Menghadkan pengendalian peristiwa kepada elemen tertentu dalam struktur bersarang
• Menentukan lokasi tepat elemen pada halaman

Kegunaan currentTarget:

• Menentukan elemen yang melekat pada pendengar acara
• Mengawal penyebaran acara dengan menghentikan lagi menggelegak atau menangkap acara tambahan
• Melaksanakan delegasi acara untuk mengendalikan acara pada berbilang elemen dengan pendengar acara tunggal

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