Denne opplæringen vil definere prosedyren for hvordan du setter onClick med JavaScript.
Slik setter du påKlikk med JavaScript
For å stille inn ved trykk med JavaScript er det to forskjellige metoder, som er:
- Den første metoden er å tilordne en verdi til HTML-elementet ved trykk attributt ved hjelp av JavaScript.
- Den andre metoden er å eksplisitt legge til en hendelseslytter på HTML-hendelsen som sjekker for ' klikk ' begivenhet.
Eksempel 1: Tilordne en verdi til HTML-elementets onclick-attributt ved å bruke JavaScript
I HTML-filen oppretter du en overskrift og en knapp ' Klikk på meg ' med id ' js ” som vil utløse JavaScript-funksjonen mens du klikker på den.
< h2 > Sett onClick eiendom med JavaScript h2 >
< knappen ID = 'js' > Klikk på meg knapp >
I det følgende trinnet får du tilgang til den opprettede knappen og en ' ved trykk ”-attributtet vil bli knyttet til det. Ved å klikke på knappen, vil den angitte funksjonen bli utført og ' stil.bakgrunnsfarge '-egenskapen vil endre knappens farge som følger:
dokument. getElementById ( 'js' ) . ved trykk = funksjon jsFunc ( ) {
dokument. getElementById ( 'js' ) . stil . bakgrunnsfarge = 'lilla' ;
}
Den tilsvarende utgangen vil være:
Eksempel 2: Legg eksplisitt til en hendelseslytter på HTML-hendelsen
Lag en knapp ' Klikk her! ' og tildeler en id ' begivenhet ” til den som vil utløse addEventListener()-metoden på 'klikk' begivenhet:
< knappen ID = 'begivenhet' > Klikk her ! sterk > knapp sterk >>
Hent knappen ved å bruke dens id og legg deretter ved en ' addEventListener() '-metoden ved å sende en ' klikk ' hendelse og en funksjon ' eventFunc ' hvor bakgrunnsfargen på knappen vil bli endret:
dokument. getElementById ( 'begivenhet' ) . addEventListener ( 'klikk' , eventFunc ) ;funksjon hendelseFunc ( ) {
dokument. getElementById ( 'begivenhet' ) . stil . bakgrunnsfarge = 'Grønn' ;
}
Produksjon
Eksempel 3: Bruke alle onClick-metoder samtidig
I dette eksemplet vil virkemåten til alle metodene vises samtidig. Først er standardmåten for å legge til onclick-attributtet i selve HTML-taggen. Etter det har de to metodene for å sette onclick-attributtet ved hjelp av JavaScript også blitt demonstrert.
I følgende eksempel, lag tre knapper og se funksjonaliteten til onclick-attributtet.
- Den første knappen ' Klikk ' vil ringe ' htmlFunc() ” på klikkhendelsen.
- Knappen ' Klikk på meg ' vil bli åpnet med sin tildelte id ' js ” og tilordne deretter en verdi til knappens onclick-attributt ved hjelp av JavaScript.
- Knappen ' Klikk her! ' vil bli åpnet med id ' begivenhet ' og legg deretter ved en ' addEventListener() ' metode med det:
< knappen ID = 'js' > Klikk på meg knapp >< br >< br >
< knappen ID = 'begivenhet' > Klikk her ! knapp >
Funksjonen nedenfor vil utløse ' ved trykk ' hendelse av knappen ' Klikk ':
funksjon htmlFunk ( ) {varsling ( 'Knappen klikket av HTML onClick-hendelse' ) ;
}
Ved å klikke på ' Klikk på meg ”-knappen, vil følgende funksjon utløses der en advarsel vises.
dokument. getElementById ( 'js' ) . ved trykk = funksjon jsFunc ( ) {varsling ( 'Knappen klikket av JavaScript onClick-funksjonen' ) ;
}
Den gitte funksjonen vil utløse knappen ' Klikk her! ':
dokument. getElementById ( 'begivenhet' ) . addEventListener ( 'klikk' , eventFunc ) ;funksjon hendelseFunc ( ) {
varsling ( 'Knappen klikket av JavaScript på Klikk med EventListener-metoden' ) ;
}
Utgangen vil vise varselmeldinger ved hvert knappeklikk:
Konklusjon
For å sette onclick med JavaScript, er det to forskjellige tilnærminger, den første er å tilordne en verdi til HTML-elementets onclick-attributt ved hjelp av JavaScript, og den andre tilnærmingen er å eksplisitt legge til en hendelseslytter på HTML-hendelsen som sjekker for ' klikk ' begivenhet. Denne opplæringen har definert metodene for å sette onClick med JavaScript sammen med eksempler.