Dit bericht illustreert het 'event.target' en het gebruik ervan in JavaScript.
Wat is 'event.target' in JavaScript?
De ' gebeurtenis.doel ” is een eigenschap/attribuut van “ evenement ” in javascript. Het verwijst naar het element dat de gebeurtenis veroorzaakte. Om toegang te krijgen tot het event.target attribuut, moet er naar de gebeurtenis van het element worden geluisterd. De ' addEventListener() ” methode wordt gebruikt voor het luisteren naar de specifieke gebeurtenis.
Syntaxis
Volg de gegeven syntaxis om de eigenschap 'event.target' te gebruiken:
element. addEventListener ( '
troosten. loggen ( evenement. doel )
} )
In de gegeven syntaxis,
- De ' addEventListener() ” methode wordt gebruikt voor het toevoegen van een gebeurtenishandler voor het specifieke element.
- “
” geeft elke gebeurtenis aan, zoals “ Klik ”, “ mouseover ', enzovoort.
Voorbeeld
In het gegeven voorbeeld krijgen we het element dat de gebeurtenis heeft geactiveerd met behulp van de ' gebeurtenis.doel ' eigendom.
Hier zullen we een knop maken door een id toe te wijzen ' btn ” dat wordt gebruikt in JavaScript voor toegang tot de knop:
< knop-id = 'btn' > Klik hier knop >
In het JavaScript-bestand krijgen we eerst de referentie van de knop met behulp van de toegewezen id met behulp van de ' getElementById() ” methode:
const knop = document. getElementById ( 'btn' ) ;Koppel een gebeurtenislistener met de knop. De ' Klik ”-gebeurtenis wordt geïnitieerd door op de knop te klikken en het gebeurtenisobject wordt als argument doorgegeven aan de gebeurtenislistener. De ' gebeurtenis.doel ” attribuut is toegankelijk vanuit de listenerfunctie om een verwijzing te krijgen naar het knopelement dat de gebeurtenis heeft geactiveerd:
knop. addEventListener ( 'Klik' , functie ( evenement ) {troosten. loggen ( 'Doelgebeurtenis:' , evenement. doel ) ;
} ) ;
De uitvoer toont de referentie van de specifieke knop waarop is geklikt:
U kunt meer informatie krijgen en verschillende functionaliteiten, zoals styling, toepassen op het beoogde evenement met behulp van de bijbehorende attributen.
Wat zijn de kenmerken van 'event.target'?
Er zijn verschillende kenmerken van de eigenschap 'event.target' die informatie geven over het doelelement. Enkele van de algemene kenmerken van het object event.target zijn als volgt:
| event.target-attributen | Beschrijving |
| evenement.doel.tagnaam | Gebruikt om de ' naam ” van de HTML-tag van het doelelement. |
| gebeurtenis.doelwaarde | Gebruik voor het ophalen van de ' waarde ” van het doelelement. Dit attribuut wordt meestal gebruikt voor invoerelementen. |
| evenement.target.id | Voor het verkrijgen van de “ ID kaart ” attribuut van het doelelement, gebruik dan het gegeven attribuut. |
| event.target.classList | De lijst van ' klassen ” met het doelelement wordt benaderd door dit attribuut. |
| evenement.target.textContent | Gebruikt om de ' tekst inhoud ” van het doelelement. |
| evenement.target.href | Dit attribuut haalt de “ href ” attribuut van het doelelement, zoals links. |
| event.doelstijl | Voor het wijzigen van de “ CSS ” eigenschap van het doelelement, gebruik dit attribuut. |
Voorbeeld 1: verander de achtergrondkleur van het doelelement
In het gegeven voorbeeld zullen we de achtergrondkleur van het doelelement wijzigen met behulp van de ' stijl ” attribuut op de “ Klik ' evenement:
const knop = document. getElementById ( 'btn' ) ;knop. addEventListener ( 'Klik' , functie ( evenement ) {
evenement. doel . stijl . Achtergrond kleur = 'blauw' ;
} ) ;
Uitgang
Voorbeeld 2: verkrijg de waarde van het doelelement
Maak een invoertekstveld en een gebied voor het weergeven van tekst met behulp van de tag
. Wijs id's toe aan het invoerveld en de tag
als ' neemInput ' En ' show ”, respectievelijk:
< invoertype = 'tekst' ID kaart = 'invoeren' >< p id = 'show' > P >
Verkrijg de referentie van het tekstveld met behulp van de ' getElementById() ” methode:
werd ingevoerd = document. getElementById ( 'invoeren' ) ;Gebruik de ' waarde ” attribuut met de “ gebeurtenis.doel ” om de waarde van het beoogde element te krijgen:
invoer. addEventListener ( 'invoer' , ( evenement ) => {document. getElementById ( 'show' ) . binnenHTML = evenement. doel . waarde ;
} )
Zoals u kunt zien, is de ingevoerde waarde in het tekstvak succesvol opgehaald met behulp van de ' waarde ” attribuut:
Dat ging allemaal over het 'event.target' in JavaScript.
Conclusie
De ' gebeurtenis.doel ” verwijst naar het element dat de gebeurtenis heeft geactiveerd/geïnitieerd. Er zijn enkele kenmerken van de eigenschap 'event.target' die informatie geven over het doelelement. Bijvoorbeeld, ' evenement.doel.tagnaam ”, “ .waarde ”, “ .ID kaart ”, “ .stijl ', enzovoort. Dit bericht illustreerde het 'event.target', de attributen en het gebruik ervan in JavaScript.