Dieser Beitrag wird das „event.target“ und seine Verwendung in JavaScript veranschaulichen.
Was ist „event.target“ in JavaScript?
Der ' ereignis.ziel ” ist eine Eigenschaft/Attribut von “ Fall “ in JavaScript. Es bezieht sich auf das Element, das das Ereignis ausgelöst hat. Um auf das Attribut event.target zuzugreifen, muss auf das Ereignis des Elements gelauscht werden. Der ' addEventListener() “-Methode wird zum Anhören des spezifischen Ereignisses verwendet.
Syntax
Um die Eigenschaft „event.target“ zu verwenden, folgen Sie der angegebenen Syntax:
Element. addEventListener ( '
Konsole. Protokoll ( Fall. Ziel )
} )
In der gegebenen Syntax,
- Der ' addEventListener() ”-Methode wird zum Hinzufügen eines Ereignishandlers für das spezifische Element verwendet.
- „
“ gibt ein beliebiges Ereignis an, z. B. „ klicken “, „ Mouseover ', usw.
Beispiel
In dem gegebenen Beispiel erhalten wir das Element, das das Ereignis ausgelöst hat, mit dem „ ereignis.ziel ' Eigentum.
Hier erstellen wir eine Schaltfläche, indem wir eine ID zuweisen. btn “, der in JavaScript für den Aufruf der Schaltfläche verwendet wird:
< Schaltflächen-ID = 'btn' > Klicken Sie hier Taste >
In der JavaScript-Datei erhalten wir zunächst die Referenz des Buttons anhand seiner zugewiesenen ID mit Hilfe des „ getElementById() ' Methode:
konst Taste = dokumentieren. getElementById ( 'btn' ) ;Hängen Sie einen Ereignis-Listener mit der Schaltfläche an. Der ' klicken “-Ereignis wird beim Klicken auf die Schaltfläche initiiert, und das Ereignisobjekt wird als Argument an den Ereignis-Listener übergeben. Der ' ereignis.ziel ”-Attribut ist über die Listener-Funktion zugänglich, um einen Verweis auf das Schaltflächenelement zu erhalten, das das Ereignis ausgelöst hat:
Taste. addEventListener ( 'klicken' , Funktion ( Fall ) {Konsole. Protokoll ( 'Zielereignis:' , Fall. Ziel ) ;
} ) ;
Die Ausgabe zeigt die Referenz der spezifischen Schaltfläche, auf die geklickt wird:
Sie können weitere Informationen erhalten und verschiedene Funktionen wie Styling auf das Zielereignis anwenden, indem Sie seine Attribute verwenden.
Was sind die Attribute von „event.target“?
Es gibt verschiedene Attribute der Eigenschaft „event.target“, die Auskunft über das Zielelement geben. Einige der gemeinsamen Attribute des event.target-Objekts sind wie folgt:
| event.target-Attribute | Beschreibung |
| ereignis.ziel.tagname | Wird verwendet, um die „ Name ” des HTML-Tags des Zielelements. |
| ereignis.zielwert | Verwenden Sie zum Abrufen der „ Wert ” des Zielelements. Dieses Attribut wird hauptsächlich für Eingabeelemente verwendet. |
| event.target.id | Für den Erhalt des „ Ausweis ”-Attribut des Zielelements verwenden Sie das angegebene Attribut. |
| event.target.classList | Die Liste der ' Klassen ” mit dem Zielelement wird über dieses Attribut zugegriffen. |
| event.ziel.textInhalt | Wird verwendet, um die „ Textinhalt ” des Zielelements. |
| event.target.href | Dieses Attribut ruft die „ href ”-Attribut des Zielelements, z. B. Links. |
| event.target.style | Zum Ändern des „ CSS ”-Eigenschaft des Zielelements verwenden Sie dieses Attribut. |
Beispiel 1: Ändern Sie die Hintergrundfarbe des Zielelements
Im bereitgestellten Beispiel ändern wir die Hintergrundfarbe des Zielelements mit dem „ Stil ”-Attribut auf dem “ klicken ' Fall:
konst Taste = dokumentieren. getElementById ( 'btn' ) ;Taste. addEventListener ( 'klicken' , Funktion ( Fall ) {
Fall. Ziel . Stil . Hintergrundfarbe = 'Blau' ;
} ) ;
Ausgang
Beispiel 2: Holen Sie sich den Wert des Zielelements
Erstellen Sie ein Eingabetextfeld und einen Bereich zum Anzeigen von Text mit dem Tag
. Weisen Sie dem Eingabefeld und dem Tag
IDs als „ nimmEingabe ' Und ' zeigen ', bzw:
< Eingabetyp = 'Text' Ausweis = 'Eingabe nehmen' >< p-ID = 'zeigen' > P >
Holen Sie sich die Referenz des Textfeldes mit dem „ getElementById() ' Methode:
eingegeben wurde = dokumentieren. getElementById ( 'Eingabe nehmen' ) ;Verwenden Sie das „ Wert ”-Attribut mit dem “ ereignis.ziel “, um den Wert des Zielelements zu erhalten:
Eingang. addEventListener ( 'Eingang' , ( Fall ) => {dokumentieren. getElementById ( 'zeigen' ) . innerHTML = Fall. Ziel . Wert ;
} )
Wie Sie sehen können, wurde der in das Textfeld eingegebene Wert erfolgreich mit dem „ Wert ” Attribut:
Das war alles über das „event.target“ in JavaScript.
Abschluss
Der ' ereignis.ziel “ bezieht sich auf das Element, das das Ereignis ausgelöst/initiiert hat. Es gibt einige Attribute der Eigenschaft „event.target“, die Informationen über das Zielelement liefern. Zum Beispiel, ' ereignis.ziel.tagname “, „ .Wert “, „ .Ausweis “, „ .Stil ', usw. Dieser Beitrag veranschaulichte das „event.target“, seine Attribute und seine Verwendung in JavaScript.