See õpetus määratleb protseduuri, kuidas onClick JavaScriptiga seadistada.
Kuidas seadistada onClick JavaScriptiga
Et määrata onclick JavaScriptiga on kaks erinevat meetodit, mis on:
- Esimene meetod on HTML-i elemendile väärtuse määramine onclick atribuut JavaScripti abil.
- Teine meetod on lisada HTML-sündmusele selgesõnaliselt sündmuste kuulaja, mis kontrollib klõpsa ” üritus.
Näide 1: määrake väärtus HTML-i elemendi onclick atribuudile JavaScripti abil
Looge HTML-failis pealkiri ja nupp ' Klõpsake mind 'ID-ga' js ”, mis käivitab sellel klõpsates JavaScripti funktsiooni.
< h2 > Määra onClicki atribuut JavaScriptiga h2 >
< nupu id = 'js' > Klõpsake mind nuppu >
Järgmises etapis avatakse juurdepääs loodud nupule ja kuvatakse ' onclick ” atribuut lisatakse sellele. Nupule klõpsamisel käivitatakse määratud funktsioon ja ' style.backgroundColor ” atribuut muudab nupu värvi järgmiselt:
dokument. getElementById ( 'js' ) . onclick = funktsioon jsFunc ( ) {
dokument. getElementById ( 'js' ) . stiilis . taustavärv = 'Lilla' ;
}
Vastav väljund on:
Näide 2: lisage HTML-sündmusele selgelt sündmustekuulaja
Loo nupp ' Kliki siia! 'ja määrab ID' sündmus ”, mis käivitab failis meetodi addEventListener(). 'klõpsake' sündmus:
< nupu id = 'sündmus' > Kliki siia ! tugev > nuppu tugev >>
Hankige nupp selle abil id ja seejärel lisage ' addEventListener() ” meetod, läbides „ klõpsa 'sündmus ja funktsioon' eventFunc ” kus nupu taustavärvi muudetakse:
dokument. getElementById ( 'sündmus' ) . addEventListener ( 'klõpsake' , eventFunc ) ;funktsioon eventFunc ( ) {
dokument. getElementById ( 'sündmus' ) . stiilis . taustavärv = 'Roheline' ;
}
Väljund
Näide 3: Kõigi onClick meetodite kasutamine korraga
Selles näites kuvatakse kõigi meetodite tööd korraga. Esimene on vaikimisi viis atribuudi onclick lisamiseks HTML-i märgendisse. Pärast seda on demonstreeritud ka kahte meetodit onclick atribuudi määramiseks JavaScripti abil.
Järgmises näites looge kolm nuppu ja vaadake atribuudi onclick funktsionaalsust.
- Esimene nupp ' Klõpsake ' helistab ' htmlFunc() ” klikisündmusel.
- nupp ' Klõpsake mind ' pääseb juurde selle määratud ID-ga ' js ” ja seejärel määrake nupu onclick atribuudile väärtus JavaScripti abil.
- nupp ' Kliki siia! ' pääseb juurde ID abil sündmus ja seejärel lisage ' addEventListener() ” meetod sellega:
< nupu id = 'js' > Klõpsake mind nuppu >< br >< br >
< nupu id = 'sündmus' > Kliki siia ! nuppu >
Allolev funktsioon käivitab ' onclick 'nupu sündmus' Klõpsake ”:
funktsioon htmlFunc ( ) {hoiatus ( 'HTML onClicki sündmuse poolt klõpsatud nupp' ) ;
}
Klõpsates ' Klõpsake Mina ” nuppu, käivitub järgmine funktsioon, kus kuvatakse hoiatusteade.
dokument. getElementById ( 'js' ) . onclick = funktsioon jsFunc ( ) {hoiatus ( 'Nupp, millele klõpsas JavaScript onClick funktsiooni' ) ;
}
Antud funktsioon käivitab nupu ' Kliki siia! ”:
dokument. getElementById ( 'sündmus' ) . addEventListener ( 'klõpsake' , eventFunc ) ;funktsioon eventFunc ( ) {
hoiatus ( 'Nupp, millele JavaScript on Click with EventListener Method' klõpsanud ) ;
}
Väljund kuvab iga nupuvajutuse korral hoiatusteateid:
Järeldus
Onclicki seadistamiseks JavaScriptiga on kaks erinevat lähenemisviisi. Esimene on HTML-i elemendi onclick atribuudile väärtuse määramine JavaScripti abil ja teine lähenemisviis on HTML-sündmusele selgesõnalise sündmustekuulaja lisamine, mis kontrollib klõpsa ” üritus. Selles õpetuses on koos näidetega määratletud meetodid onClicki seadistamiseks JavaScriptiga.