Tento príspevok ilustruje „event.target“ a jeho použitie v JavaScripte.
Čo je „event.target“ v JavaScripte?
' udalosť.cieľ “ je vlastnosť/atribút „ udalosť “ v JavaScripte. Vzťahuje sa na prvok, ktorý spustil udalosť. Ak chcete získať prístup k atribútu event.target, musíte si vypočuť udalosť prvku. ' addEventListener() “ metóda sa používa na počúvanie konkrétnej udalosti.
Syntax
Ak chcete použiť vlastnosť „event.target“, postupujte podľa uvedenej syntaxe:
element. addEventListener ( '
konzoly. log ( udalosť. cieľ )
} )
V danej syntaxi
- ' addEventListener() “ sa používa na pridanie obsluhy udalosti pre konkrétny prvok.
- “
“ označuje akúkoľvek udalosť, ako napr. kliknite “, “ prejdenie myšou ', a tak ďalej.
Príklad
V uvedenom príklade získame prvok, ktorý spustil udalosť pomocou „ udalosť.cieľ ' nehnuteľnosť.
Tu vytvoríme tlačidlo priradením id “ btn “, ktorý sa používa v JavaScripte na prístup k tlačidlu:
< ID tlačidla = 'btn' > Kliknite tu tlačidlo >
V súbore JavaScript najprv získame referenciu tlačidla pomocou jeho priradeného ID pomocou „ getElementById() “ metóda:
konšt tlačidlo = dokument. getElementById ( 'btn' ) ;Pripojte prijímač udalostí pomocou tlačidla. ' kliknite ” udalosť sa spustí kliknutím na tlačidlo a objekt udalosti sa odovzdá poslucháčovi udalosti ako argument. ' udalosť.cieľ ” je prístupný z funkcie poslucháča, aby ste získali odkaz na prvok tlačidla, ktorý spustil udalosť:
tlačidlo. addEventListener ( 'klikni' , funkcia ( udalosť ) {konzoly. log ( 'Cieľová udalosť:' , udalosť. cieľ ) ;
} ) ;
Výstup zobrazuje odkaz na konkrétne tlačidlo, na ktoré sa klikne:
Môžete získať viac informácií a použiť rôzne funkcie, ako napríklad štýl, na cieľovú udalosť pomocou jej atribútov.
Aké sú atribúty „event.target“?
Existujú rôzne atribúty vlastnosti „event.target“, ktoré poskytujú informácie o cieľovom prvku. Niektoré zo spoločných atribútov objektu event.target sú nasledovné:
| event.target Atribúty | Popis |
| event.target.tagname | Používa sa na získanie „ názov ” značky HTML cieľového prvku. |
| event.cieľová.hodnota | Využite na získanie „ hodnotu ” cieľového prvku. Tento atribút sa väčšinou používa pre vstupné prvky. |
| event.target.id | Za získanie „ id ” atribútu target elementu, použite daný atribút. |
| event.target.classList | Zoznam „ triedy ” obsahujúci cieľový prvok je prístupný týmto atribútom. |
| event.target.textContent | Používa sa na získanie „ textový obsah ” cieľového prvku. |
| event.cieľ.href | Tento atribút načítava „ href ” atribút cieľového prvku, ako sú odkazy. |
| event.cieľový.štýl | Na úpravu „ CSS ” vlastnosť cieľového prvku, použite tento atribút. |
Príklad 1: Zmeňte farbu pozadia cieľového prvku
V uvedenom príklade zmeníme farbu pozadia cieľového prvku pomocou „ štýl ” atribút na “ kliknite “udalosť:
konšt tlačidlo = dokument. getElementById ( 'btn' ) ;tlačidlo. addEventListener ( 'klikni' , funkcia ( udalosť ) {
udalosť. cieľ . štýl . farba pozadia = 'Modrá' ;
} ) ;
Výkon
Príklad 2: Získajte hodnotu cieľového prvku
Vytvorte vstupné textové pole a oblasť na zobrazenie textu pomocou značky
. Priraďte ID vstupnému poľu a značku
ako „ takeInput “ a „ šou “, respektíve:
< typ vstupu = 'text' id = 'takeInput' >< p id = 'šou' > p >
Získajte odkaz na textové pole pomocou „ getElementById() “ metóda:
bol vstup = dokument. getElementById ( 'takeInput' ) ;Použi ' hodnotu ” atribút s “ udalosť.cieľ “, aby ste získali hodnotu zacieleného prvku:
vstup. addEventListener ( 'vstup' , ( udalosť ) => {dokument. getElementById ( 'šou' ) . innerHTML = udalosť. cieľ . hodnotu ;
} )
Ako môžete vidieť, že hodnota zadaná do textového poľa bola úspešne získaná pomocou „ hodnotu ” atribút:
To bolo všetko o „event.target“ v JavaScripte.
Záver
' udalosť.cieľ “ označuje prvok, ktorý spustil/inicioval udalosť. Existuje niekoľko atribútov vlastnosti „event.target“, ktoré poskytujú informácie o cieľovom prvku. Napríklad „ event.target.tagname “, “ .hodnota “, “ .id “, “ .štýl ', a tak ďalej. Tento príspevok ilustroval „event.target“, jeho atribúty a jeho použitie v JavaScripte.