Was ist Ereignis.Ziel in JavaScript?

Ein "Fall”Tritt auf, wenn sich der Zustand eines Objekts ändert. Benutzeraktivitäten wie das Drücken einer Taste oder das Klicken auf die Maus können zu Ereignissen führen. Es gibt einige Eigenschaften eines Ereignisses in JavaScript, das bei Veranstaltungen zur Behandlung von Ereignissen hilft. Der "Fall.ZielIst einer von ihnen, der identifiziert, welches bestimmte Element das Ereignis ausgelöst hat.

Dieser Beitrag veranschaulicht das „Ereignis.Ziel “und seine Verwendung in JavaScript.

Was ist „Ereignis.Ziel “in JavaScript?

Der "Fall.ZielIst eine Eigenschaft/Attribut von “Fall”In JavaScript. Es bezieht sich auf das Element, das das Ereignis ausgelöst hat. Zugriff auf die Veranstaltung.Zielattribut muss das Ereignis des Elements angehört werden. Der "AddEventListener ()Die Methode wird zum Anhören des spezifischen Ereignisses verwendet.

Syntax

Für die Verwendung des „Ereignisses.Ziel “Eigenschaft, folgen Sie der angegebenen Syntax:

Element.AddEventListener ("", Funktion (Ereignis)
Konsole.Protokoll (Ereignis.Ziel)
)

In der angegebenen Syntax,

• Der "AddEventListener ()Die Methode wird zum Hinzufügen eines Ereignishandlers für das spezifische Element verwendet.
• “”Zeigt jedes Ereignis an, wie z."klicken","Mausover", usw.

Beispiel

In dem angegebenen Beispiel erhalten wir das Element, das das Ereignis mit der “ausgelöst hatFall.Ziel" Eigentum.

Hier erstellen wir eine Schaltfläche, indem wir eine ID zuweisen “BtnDas wird in JavaScript zum Zugriff auf die Schaltfläche verwendet:

Klicken Sie hier

In der JavaScript -Datei erhalten wir zunächst die Referenz der Schaltfläche mithilfe der zugewiesenen ID mit Hilfe des “GetElementById ()" Methode:

const button = dokument.GetElementById ('btn');

Fügen Sie einen Ereignishörer mit der Taste bei. Der "klickenDas Ereignis wird auf dem Klick der Schaltfläche initiiert und das Ereignisobjekt wird als Argument an den Ereignishörer übergeben. Der "Fall.ZielDas Attribut ist über die Listener -Funktion zugegriffen, um einen Verweis auf das Tastenelement zu erhalten, das das Ereignis ausgelöst hat:

Taste.AddEventListener ('Click', Funktion (Ereignis)
Konsole.Log ('Zielereignis:', Ereignis.Ziel);
);

Die Ausgabe zeigt die Referenz der spezifischen Schaltfläche, auf die geklickt wird:

Sie können weitere Informationen erhalten und verschiedene Funktionen wie das Styling auf dem gezielten Ereignis anwenden, indem Sie seine Attribute verwenden.

Was sind die Attribute von „Ereignis.Ziel"?

Es gibt verschiedene Attribute des „Ereignisses.”” ”Eigenschaft, die Informationen zum Zielelement enthält. Nur wenige der gemeinsamen Eigenschaften des Ereignisses.Zielobjekt lautet wie folgt:

Fall.Zielattribute	Beschreibung
Fall.Ziel.Verlinke den Namen	Verwendet, um das zu bekommenName”Des HTML -Tags des Zielelements.
Fall.Ziel.Wert	Verwenden Sie zum Abrufen des “Wert”Des Zielelements. Dieses Attribut wird hauptsächlich für Eingabeelemente verwendet.
Fall.Ziel.Ausweis	Für das "das"Ausweis”Attribut des Zielelements verwenden das angegebene Attribut.
Fall.Ziel.Klasse	Die Liste der "KlassenAuf das Zielelement wird durch dieses Attribut zugegriffen.
Fall.Ziel.Textinhalt	Verwendet, um das zu bekommenTextinhalt”Des Zielelements.
Fall.Ziel.href	Dieses Attribut holt die “abhref”Attribut des Zielelements wie Links.
Fall.Ziel.Stil	Zum Ändern der “CSS”Eigenschaft des Zielelements, verwenden Sie dieses Attribut.

Beispiel 1: Ändern Sie die Hintergrundfarbe des Zielelements

Im vorgesehenen Beispiel ändern wir die Hintergrundfarbe des Zielelements mit der “Stil”Attribut auf“klicken" Fall:

const button = dokument.GetElementById ('btn');
Taste.AddEventListener ('Click', Funktion (Ereignis)
Fall.Ziel.Stil.HintergrundColor = "Blue";
);

Ausgang

Beispiel 2: Erhalten Sie den Wert des Zielelements

Erstellen Sie ein Eingabtextfeld und einen Bereich zum Anzeigen von Text mithilfe

Schild. Weisen Sie dem Eingabefeld IDs und zuweisen

Tag als "TakeInput" Und "zeigen", bzw:

Holen Sie sich die Referenz des Textfelds mit der “GetElementById ()" Methode:

var input = Dokument.GetElementById ("takeInput");

Verwenden Sie die “Wert”Attribut mit dem“Fall.Ziel”Um den Wert des gezielten Elements zu erhalten:

Eingang.AddEventListener ("Eingabe", (Ereignis) =>
dokumentieren.GetElementById ("Show").Innerhtml = Ereignis.Ziel.Wert;
)

Wie Sie sehen können, dass der im Textfeld eingegebene Wert erfolgreich mit der “abgerufen wurdeWert”Attribut:

Das war alles um das „Ereignis.Ziel “in JavaScript.

Abschluss

Der "Fall.Ziel”Bezieht sich auf das Element, das das Ereignis ausgelöst/initiierte. Es gibt einige Eigenschaften des „Ereignisses.”” ”Eigenschaft, die Informationen zum Zielelement enthält. Zum Beispiel, "Fall.Ziel.Verlinke den Namen",".Wert",".Ausweis",".Stil", usw. Dieser Beitrag illustrierte das „Ereignis.Ziel “, seine Attribute und seine Verwendung in JavaScript.