Heim > Web-Frontend > js-Tutorial > Wie identifiziere ich das Element, das ein Unschärfeereignis in HTML verursacht?

Wie identifiziere ich das Element, das ein Unschärfeereignis in HTML verursacht?

DDD
Freigeben: 2024-10-19 14:38:31
Original
786 Leute haben es durchsucht

How to Identify the Element Causing a Blur Event in HTML?

Bestimmen des Zielelements, das ein Unschärfeereignis auslöst

Wenn Sie Unschärfeereignisse in einem HTML-Eingabeelement verarbeiten, fragen Sie sich möglicherweise, wie Sie das identifizieren können Element, das die Fokusverschiebung verursacht hat. In diesem Artikel werden Methoden zum Abrufen der ID des auslösenden Elements untersucht.

Im bereitgestellten Codeausschnitt wird das Unschärfeereignis an ein Eingabefeld angehängt. Die Herausforderung besteht jedoch darin, das Element zu bestimmen, das das Unschärfeereignis ausgelöst hat, z. B. ein anklickbares Span-Element.

Lösung mit der relatedTarget-Eigenschaft

Gemäß der Event Target-Spezifikation , stellt die relatedTarget-Eigenschaft des Ereignisobjekts Informationen über das Element bereit, das den Fokus erlangt hat, nachdem das Unschärfeereignis aufgetreten ist. Für Unschärfeereignisse:

relatedTarget: event target receiving focus
Nach dem Login kopieren

Beispiel:

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);
});
Nach dem Login kopieren

Indem Sie diesen Unschärfe-Listener an Eingabeelemente anhängen, können Sie das auslösende Element identifizieren, wenn es den Fokus erhält ( className = 'focused') und ändern Sie den className des unscharfen Eingabeelements in 'unscharf'.

Das obige ist der detaillierte Inhalt vonWie identifiziere ich das Element, das ein Unschärfeereignis in HTML verursacht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage