Wie identifiziere ich Elemente, die Unschärfeereignisse in der Webentwicklung auslösen?

Identifizieren von Elementen, die an Unschärfeereignissen beteiligt sind

In der Webentwicklung ist es oft notwendig, Fokusänderungen zwischen Elementen zu verfolgen. Stellen Sie sich ein Szenario vor, in dem ein HTML-Eingabefeld über einen Listener für Unschärfeereignisse verfügt:

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

Wenn ein anderes Element als myInput den Fokus erhält, wird das Unschärfeereignis ausgelöst und die Funktion myBlurHandler() wird ausgeführt. Wie können Sie jedoch innerhalb dieser Funktion feststellen, welches Element das Ereignis ausgelöst hat?

Laut UI Events kann zu diesem Zweck die relatedTarget-Eigenschaft des Ereignisses verwendet werden. Bei Unschärfeereignissen bezieht sich relatedTarget auf das Ereignisziel, das den Fokus erhält:

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

Dadurch können Sie auf das Element zugreifen, das die Auslösung des Unschärfeereignisses verursacht hat, wie im folgenden Beispiel gezeigt:

<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>

In diesem Beispiel werden Eingabeelemente orange, wenn sie den Fokus verlieren, und das Element, das den Fokus erhält, wird gelb, sodass der Fokusübergang visuell leicht verfolgt werden kann.

Das obige ist der detaillierte Inhalt vonWie identifiziere ich Elemente, die Unschärfeereignisse in der Webentwicklung auslösen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!