Ta vadnica bo opredelila postopek, kako nastaviti onClick z JavaScriptom.
Kako nastaviti onClick z JavaScriptom
Za nastavitev onclick z JavaScriptom obstajata dve različni metodi, ki sta:
- Prva metoda je dodelitev vrednosti elementom HTML onclick atribut z uporabo JavaScripta.
- Druga metoda je izrecno dodajanje poslušalca dogodkov v dogodek HTML, ki preveri, ali je ' kliknite ” dogodek.
1. primer: dodelite vrednost atributu onclick elementa HTML z uporabo JavaScripta
V datoteki HTML ustvarite naslov in gumb » Kliknite me ' z id ' js «, ki bo ob kliku sprožil funkcijo JavaScript.
< h2 > Set lastnost onClick z JavaScriptom h2 >
< ID gumba = 'js' > Kliknite me gumb >
V naslednjem koraku bo dostopan ustvarjeni gumb in prikazan je » onclick ” mu bo priložen atribut. Po kliku na gumb se izvede navedena funkcija in prikaže se “ style.backgroundColor ” spremeni barvo gumba na naslednji način:
dokument. getElementById ( 'js' ) . onclick = funkcija jsFunc ( ) {
dokument. getElementById ( 'js' ) . stil . Barva ozadja = 'vijolična' ;
}
Ustrezen rezultat bo:
2. primer: izrecno dodajte poslušalca dogodkov v dogodek HTML
Ustvari gumb ' Klikni tukaj! « in dodeli ID « dogodek ”, ki bo sprožil metodo addEventListener() na 'klik' dogodek:
< ID gumba = 'dogodek' > Klikni tukaj ! močan > gumb močan >>
Pridobite gumb z njegovim id in nato priložite » addEventListener() ' s posredovanjem ' kliknite 'dogodek in funkcija' eventFunc «, kjer bo spremenjena barva ozadja gumba:
dokument. getElementById ( 'dogodek' ) . addEventListener ( 'klik' , eventFunc ) ;funkcija eventFunc ( ) {
dokument. getElementById ( 'dogodek' ) . stil . Barva ozadja = 'Zelena' ;
}
Izhod
Primer 3: Uporaba vseh metod onClick hkrati
V tem primeru bo prikazano delovanje vseh metod hkrati. Prvi je privzeti način dodajanja atributa onclick znotraj same oznake HTML. Nato sta bila prikazana tudi dva načina nastavitve atributa onclick s pomočjo JavaScripta.
V naslednjem primeru ustvarite tri gumbe in si oglejte funkcionalnost atributa onclick.
- Prvi gumb ' Kliknite « bo poklical » htmlFunc() « ob dogodku klika.
- Gumb “ Kliknite me »bo dostopen z dodeljenim ID-jem« js ” in nato z JavaScriptom dodelite vrednost atributu onclick gumba.
- Gumb “ Klikni tukaj! » bo dostopen z id-jem » dogodek « in nato priložite » addEventListener() ” metoda z njim:
< ID gumba = 'js' > Kliknite me gumb >< št >< št >
< ID gumba = 'dogodek' > Klikni tukaj ! gumb >
Spodnja funkcija bo sprožila » onclick ' dogodek gumba ' Kliknite ”:
funkcija htmlFunc ( ) {opozorilo ( 'Gumb, ki ga je kliknil dogodek HTML onClick' ) ;
}
Ob kliku na ' Kliknite Jaz ” se sproži naslednja funkcija, kjer se prikaže opozorilno sporočilo.
dokument. getElementById ( 'js' ) . onclick = funkcija jsFunc ( ) {opozorilo ( 'Gumb, ki ga klikne funkcija JavaScript onClick' ) ;
}
Dana funkcija bo sprožila gumb “ Klikni tukaj! ”:
dokument. getElementById ( 'dogodek' ) . addEventListener ( 'klik' , eventFunc ) ;funkcija eventFunc ( ) {
opozorilo ( 'Gumb, ki ga klikne JavaScript onClick z metodo EventListener' ) ;
}
Izhod bo prikazal opozorilna sporočila ob vsakem kliku gumba:
Zaključek
Če želite nastaviti onclick z JavaScriptom, obstajata dva različna pristopa, prvi je dodelitev vrednosti atributu onclick elementa HTML z uporabo JavaScripta, drugi pristop pa je eksplicitno dodajanje poslušalca dogodkov v dogodek HTML, ki preveri, ali je ' kliknite ” dogodek. V tej vadnici so opredeljene metode za nastavitev onClick z JavaScriptom skupaj s primeri.