Tento tutoriál bude definovať postup, ako nastaviť onClick pomocou JavaScriptu.
Ako nastaviť onClick pomocou JavaScriptu
Ak chcete nastaviť po kliknutí s JavaScriptom existujú dve rôzne metódy, ktorými sú:
- Prvým spôsobom je priradiť hodnotu prvkom HTML po kliknutí atribút pomocou JavaScriptu.
- Druhou metódou je explicitné pridanie poslucháča udalostí do udalosti HTML, ktorá kontroluje „ kliknite “udalosť.
Príklad 1: Priraďte hodnotu k atribútu onclick prvku HTML pomocou JavaScriptu
V súbore HTML vytvorte nadpis a tlačidlo „ Klikni na mňa “s ID” js “, ktorý pri kliknutí naň spustí funkciu JavaScript.
< h2 > Set vlastnosť onClick s JavaScriptom h2 >
< ID tlačidla = 'js' > Klikni na mňa tlačidlo >
V nasledujúcom kroku sa sprístupní vytvorené tlačidlo a zobrazí sa „ po kliknutí bude k nemu pripojený atribút ”. Po kliknutí na tlačidlo sa vykoná zadaná funkcia a zobrazí sa „ štýl.Farba pozadia Vlastnosť ” zmení farbu tlačidla nasledovne:
dokument. getElementById ( 'js' ) . po kliknutí = funkcia jsFunc ( ) {
dokument. getElementById ( 'js' ) . štýl . farba pozadia = 'Fialová' ;
}
Zodpovedajúci výstup bude:
Príklad 2: Explicitne pridajte prijímač udalostí do udalosti HTML
Vytvorte tlačidlo ' Kliknite tu! “ a priradí ID “ udalosť ” to spustí metódu addEventListener() na 'kliknúť' udalosť:
< ID tlačidla = 'udalosť' > Kliknite tu ! silný > tlačidlo silný >>
Získajte tlačidlo pomocou jeho id a potom pripojte „ addEventListener() ” metódou odovzdaním “ kliknite 'udalosť a funkcia' eventFunc ” kde sa zmení farba pozadia tlačidla:
dokument. getElementById ( 'udalosť' ) . addEventListener ( 'klik' , eventFunc ) ;funkcia eventFunc ( ) {
dokument. getElementById ( 'udalosť' ) . štýl . farba pozadia = 'Zelená' ;
}
Výkon
Príklad 3: Použitie všetkých metód onClick naraz
V tomto príklade sa zobrazí fungovanie všetkých metód naraz. Prvým je predvolený spôsob pridávania atribútu onclick do samotnej značky HTML. Potom boli demonštrované aj dva spôsoby nastavenia atribútu onclick pomocou JavaScriptu.
V nasledujúcom príklade vytvorte tri tlačidlá a pozrite si funkčnosť atribútu onclick.
- Prvé tlačidlo ' Kliknite “ bude volať „ htmlFunc() “ na udalosti kliknutia.
- Tlačidlo ' Klikni na mňa “ bude prístupný s prideleným ID “ js “ a potom pomocou JavaScriptu priraďte hodnotu atribútu onclick tlačidla.
- Tlačidlo ' Kliknite tu! “ bude prístupný pomocou id “ udalosť “ a potom pripojte „ addEventListener() “ metóda s tým:
< ID tlačidla = 'js' > Klikni na mňa tlačidlo < br < br >
< ID tlačidla = 'udalosť' > Kliknite tu ! tlačidlo >
Nižšie uvedená funkcia spustí „ po kliknutí 'udalosť tlačidla' Kliknite “:
funkcia htmlFunc ( ) {upozorniť ( 'Tlačidlo, na ktoré klikla udalosť HTML onClick' ) ;
}
Po kliknutí na „ Klikni na mňa “, spustí sa nasledujúca funkcia, kde sa zobrazí varovné hlásenie.
dokument. getElementById ( 'js' ) . po kliknutí = funkcia jsFunc ( ) {upozorniť ( 'Tlačidlo, na ktoré klikla funkcia JavaScript onClick' ) ;
}
Daná funkcia spustí tlačidlo „ Kliknite tu! “:
dokument. getElementById ( 'udalosť' ) . addEventListener ( 'klik' , eventFunc ) ;funkcia eventFunc ( ) {
upozorniť ( 'Tlačidlo, na ktoré klikol JavaScript onClick with EventListener Method' ) ;
}
Výstup zobrazí varovné správy pri každom kliknutí na tlačidlo:
Záver
Ak chcete nastaviť onclick pomocou JavaScriptu, existujú dva rôzne prístupy, prvým je priradiť hodnotu atribútu onclick prvku HTML pomocou JavaScriptu a druhým prístupom je explicitné pridanie poslucháča udalosti do udalosti HTML, ktorý kontroluje „ kliknite “udalosť. Tento tutoriál definoval metódy nastavenia onClick pomocou JavaScriptu spolu s príkladmi.