Ovaj će post ilustrirati 'event.target' i njegovu upotrebu u JavaScriptu.
Što je 'event.target' u JavaScriptu?
' događaj.cilj ” je svojstvo/atribut od „ događaj ” u JavaScriptu. Odnosi se na element koji je pokrenuo događaj. Da biste pristupili atributu event.target, mora se preslušati događaj elementa. ' addEventListener() ” metoda se koristi za slušanje određenog događaja.
Sintaksa
Za korištenje svojstva “event.target” slijedite danu sintaksu:
element. addEventListener ( '
konzola. log ( događaj. cilj )
} )
U navedenoj sintaksi,
- ' addEventListener() ” metoda se koristi za dodavanje rukovatelja događajima za određeni element.
- “
” označava bilo koji događaj, kao što je „ klik ”, “ prelazak mišem ', i tako dalje.
Primjer
U navedenom primjeru ćemo dobiti element koji je pokrenuo događaj koristeći ' događaj.cilj ” vlasništvo.
Ovdje ćemo kreirati gumb dodjeljivanjem ID-a ' btn ” koji se koristi u JavaScriptu za pristup gumbu:
< id gumba = 'btn' > Kliknite ovdje dugme >
U JavaScript datoteci, prvo ćemo dobiti referencu gumba koristeći njegov dodijeljeni ID uz pomoć ' getElementById() ” metoda:
konst dugme = dokument. getElementById ( 'btn' ) ;Priložite slušatelja događaja pomoću gumba. ' klik ” događaj se pokreće pritiskom na gumb, a objekt događaja prosljeđuje se slušatelju događaja kao argument. ' događaj.cilj ” atributu je moguće pristupiti iz funkcije slušatelja kako bi se dobila referenca na element gumba koji je pokrenuo događaj:
dugme. addEventListener ( 'klik' , funkcija ( događaj ) {konzola. log ( 'Ciljni događaj:' , događaj. cilj ) ;
} ) ;
Izlaz prikazuje referencu određenog gumba koji je kliknut:
Možete dobiti više informacija i primijeniti različite funkcije poput stiliziranja na ciljani događaj pomoću njegovih atributa.
Koji su atributi 'event.target'?
Postoje različiti atributi svojstva 'event.target' koji pružaju informacije o ciljnom elementu. Nekoliko uobičajenih atributa event.target objekta je sljedeće:
| event.target Atributi | Opis |
| event.target.tagname | Koristi se za dobivanje ' Ime ” HTML oznake ciljnog elementa. |
| event.target.value | Koristite za dohvaćanje ' vrijednost ” ciljnog elementa. Ovaj atribut se uglavnom koristi za ulazne elemente. |
| event.target.id | Za dobivanje ' iskaznica ” ciljnog elementa, upotrijebite zadani atribut. |
| event.target.classList | Popis ' klase ” koji sadrži ciljni element pristupa se ovim atributom. |
| event.target.textContent | Koristi se za dobivanje ' sadržaj teksta ” ciljnog elementa. |
| event.target.href | Ovaj atribut dohvaća ' href ” atribut ciljnog elementa, kao što su veze. |
| event.target.style | Za izmjenu ' CSS ” svojstvo ciljnog elementa, koristite ovaj atribut. |
Primjer 1: Promjena boje pozadine ciljnog elementa
U navedenom primjeru promijenit ćemo boju pozadine ciljanog elementa pomoću ' stil ' atribut na ' klik ” događaj:
konst dugme = dokument. getElementById ( 'btn' ) ;dugme. addEventListener ( 'klik' , funkcija ( događaj ) {
događaj. cilj . stil . boja pozadine = 'plava' ;
} ) ;
Izlaz
Primjer 2: Dohvatite vrijednost ciljnog elementa
Stvorite polje za unos teksta i područje za prikaz teksta pomoću oznake
. Dodijelite ID-ove polju za unos i oznaku
kao “ takeInput ' i ' pokazati “, odnosno:
< vrsta unosa = 'tekst' iskaznica = 'takeInput' >< p id = 'pokazati' > str >
Dobijte referencu tekstualnog polja pomoću ' getElementById() ” metoda:
bio je unos = dokument. getElementById ( 'takeInput' ) ;Koristiti ' vrijednost ' atribut s ' događaj.cilj ” da biste dobili vrijednost ciljanog elementa:
ulazni. addEventListener ( 'ulazni' , ( događaj ) => {dokument. getElementById ( 'pokazati' ) . unutarnjiHTML = događaj. cilj . vrijednost ;
} )
Kao što vidite da je vrijednost unesena u tekstni okvir uspješno dohvaćena pomoću ' vrijednost ” atribut:
To je bilo sve o 'event.target' u JavaScriptu.
Zaključak
' događaj.cilj ” odnosi se na element koji je pokrenuo/pokrenuo događaj. Postoje neki atributi svojstva 'event.target' koji pružaju informacije o ciljnom elementu. Na primjer, ' event.target.tagname ”, “ .vrijednost ”, “ .iskaznica ”, “ .stil ', i tako dalje. Ovaj post ilustrirao je 'event.target', njegove atribute i njegovu upotrebu u JavaScriptu.