Bagaimana Mengenalpasti Elemen yang Mencetuskan Peristiwa Kabur dalam Pembangunan Web?

Mengenal pasti Elemen yang Terlibat dalam Acara Kabur

Dalam pembangunan web, selalunya perlu untuk menjejaki perubahan fokus antara elemen. Pertimbangkan senario di mana kotak input HTML mempunyai pendengar acara kabur:

<code class="html"><input id="myInput" onblur="myBlurHandler()" /></code>

Apabila elemen selain myInput memperoleh fokus, acara kabur menyala dan fungsi myBlurHandler() dilaksanakan. Walau bagaimanapun, dalam fungsi ini, bagaimanakah anda boleh menentukan elemen yang mencetuskan acara?

Menurut Acara UI, sifat relatedTarget acara boleh digunakan untuk tujuan ini. Untuk acara kabur, relatedTarget merujuk kepada sasaran acara yang menerima fokus:

<code class="js">function myBlurHandler(event) {
  let focusedElement = event.relatedTarget;
  // Your custom logic here
}</code>

Ini membolehkan anda mengakses elemen yang menyebabkan acara kabur itu menyala, seperti yang ditunjukkan dalam contoh di bawah:

<code class="js">function blurListener(event) {
  event.target.classList.add('blurred');
  if (event.relatedTarget) event.relatedTarget.classList.add('focused');
}
document.querySelectorAll('input').forEach(el => el.addEventListener('blur', blurListener, false));</code>

Dalam contoh ini, elemen input akan bertukar jingga apabila ia hilang fokus dan elemen yang menerima fokus akan bertukar menjadi kapur, menjadikannya mudah untuk menjejak peralihan fokus secara visual.

Atas ialah kandungan terperinci Bagaimana Mengenalpasti Elemen yang Mencetuskan Peristiwa Kabur dalam Pembangunan Web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!