Ta objava bo ponazorila »event.target« in njegovo uporabo v JavaScriptu.
Kaj je »event.target« v JavaScriptu?
' event.target « je lastnost/atribut » dogodek « v JavaScriptu. Nanaša se na element, ki je sprožil dogodek. Za dostop do atributa event.target je treba poslušati dogodek elementa. ' addEventListener() ” metoda se uporablja za poslušanje določenega dogodka.
Sintaksa
Za uporabo lastnosti »event.target« sledite dani sintaksi:
element. addEventListener ( '
konzola. dnevnik ( dogodek. tarča )
} )
V dani sintaksi je
- ' addEventListener() ” se uporablja za dodajanje obdelovalca dogodkov za določen element.
- “
« označuje kateri koli dogodek, kot je » kliknite ”, “ miška ', in tako naprej.
Primer
V danem primeru bomo dobili element, ki je sprožil dogodek z uporabo ' event.target ” lastnina.
Tukaj bomo ustvarili gumb z dodelitvijo ID-ja ' btn «, ki se uporablja v JavaScriptu za dostop do gumba:
< ID gumba = 'btn' > Klikni tukaj gumb >
V datoteki JavaScript bomo najprej dobili referenco gumba z uporabo dodeljenega ID-ja s pomočjo ' getElementById() ” metoda:
konst gumb = dokument. getElementById ( 'btn' ) ;Z gumbom pripnite poslušalca dogodkov. ' kliknite ” se sproži ob kliku gumba, objekt dogodka pa se posreduje poslušalcu dogodkov kot argument. ' event.target ” je dostopen iz funkcije poslušalca, da dobite sklic na element gumba, ki je sprožil dogodek:
gumb. addEventListener ( 'klik' , funkcija ( dogodek ) {konzola. dnevnik ( 'Ciljni dogodek:' , dogodek. tarča ) ;
} ) ;
Izhod prikazuje referenco določenega gumba, ki je kliknjen:
Z njegovimi atributi lahko pridobite več informacij in uporabite različne funkcionalnosti, kot je slog na ciljnem dogodku.
Kakšni so atributi »event.target«?
Obstajajo različni atributi lastnosti »event.target«, ki zagotavljajo informacije o ciljnem elementu. Nekaj pogostih atributov predmeta event.target je naslednjih:
| atributi event.target | Opis |
| event.target.tagname | Uporablja se za pridobivanje ' ime ” oznake HTML ciljnega elementa. |
| event.target.value | Uporabite za pridobivanje ' vrednost ” ciljnega elementa. Ta atribut se večinoma uporablja za vhodne elemente. |
| event.target.id | Za pridobitev ' id ” ciljnega elementa, uporabite dani atribut. |
| event.target.classList | Seznam ' razredi ”, ki vsebuje ciljni element, je dostopen s tem atributom. |
| event.target.textContent | Uporablja se za pridobivanje ' besedilna vsebina ” ciljnega elementa. |
| event.target.href | Ta atribut pridobi ' href ” ciljnega elementa, kot so povezave. |
| event.target.style | Za spreminjanje ' CSS ” lastnost ciljnega elementa, uporabite ta atribut. |
Primer 1: Spremenite barvo ozadja ciljnega elementa
V navedenem primeru bomo spremenili barvo ozadja ciljnega elementa z uporabo ' stil ' atribut na ' kliknite ” dogodek:
konst gumb = dokument. getElementById ( 'btn' ) ;gumb. addEventListener ( 'klik' , funkcija ( dogodek ) {
dogodek. tarča . stil . Barva ozadja = 'modra' ;
} ) ;
Izhod
Primer 2: Pridobite vrednost ciljnega elementa
Z oznako
ustvarite polje za vnos besedila in območje za prikaz besedila. ID-je dodelite vnosnemu polju in označite
kot “ takeInput « in » pokazati «, oziroma:
< vrsta vnosa = 'besedilo' id = 'takeInput' >< p id = 'oddaj' > str >
Pridobite referenco besedilnega polja z uporabo ' getElementById() ” metoda:
je bil vnesen = dokument. getElementById ( 'takeInput' ) ;Uporabi ' vrednost » z atributom » event.target ”, da dobite vrednost ciljnega elementa:
vnos. addEventListener ( 'vnos' , ( dogodek ) => {dokument. getElementById ( 'oddaj' ) . notranjiHTML = dogodek. tarča . vrednost ;
} )
Kot lahko vidite, je bila vrednost, vnesena v besedilno polje, uspešno pridobljena z uporabo ' vrednost ” atribut:
To je bilo vse o »event.target« v JavaScriptu.
Zaključek
' event.target ” se nanaša na element, ki je sprožil/začel dogodek. Obstaja nekaj atributov lastnosti »event.target«, ki zagotavljajo informacije o ciljnem elementu. Na primer, ' event.target.tagname ”, “ .vrednost ”, “ .id ”, “ .slog ', in tako naprej. Ta objava je ponazorila »event.target«, njegove atribute in njegovo uporabo v JavaScriptu.