Bagaimana untuk Mengenalpasti Elemen yang Menyebabkan Acara Kabur dalam HTML?

Menentukan Elemen Sasaran Mencetuskan Acara Kabur

Apabila anda mengendalikan peristiwa kabur dalam elemen input HTML, anda mungkin tertanya-tanya bagaimana untuk mengenal pasti elemen yang menyebabkan peralihan fokus. Artikel ini meneroka kaedah untuk mendapatkan ID elemen pencetus.

Dalam coretan kod yang disediakan, peristiwa kabur dilampirkan pada medan input. Walau bagaimanapun, cabarannya terletak pada menentukan elemen yang memulakan acara kabur, seperti elemen span boleh diklik.

Penyelesaian Menggunakan Harta Sasaran yang berkaitan

Mengikut spesifikasi Sasaran Acara , sifat relatedTarget objek acara memberikan maklumat tentang elemen yang mendapat fokus selepas peristiwa kabur berlaku. Untuk acara kabur:

relatedTarget: event target receiving focus

Contoh:

function blurListener(event) {
  event.target.className = 'blurred';
  if (event.relatedTarget)
    event.relatedTarget.className = 'focused';
}

// Add blur listeners to all input elements
[].forEach.call(document.querySelectorAll('input'), function(el) {
  el.addEventListener('blur', blurListener, false);
});

Dengan melampirkan pendengar kabur ini pada elemen input, anda boleh mengenal pasti elemen pencetus apabila ia mendapat fokus ( className = 'focused') dan tukar className elemen input kabur kepada 'kabur'.

Atas ialah kandungan terperinci Bagaimana untuk Mengenalpasti Elemen yang Menyebabkan Acara Kabur dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!