Denne vejledning vil definere proceduren for, hvordan du indstiller onClick med JavaScript.
Sådan indstilles onClick med JavaScript
For at indstille onclick med JavaScript er der to forskellige metoder, som er:
- Den første metode er at tildele en værdi til HTML-elementets onclick attribut ved hjælp af JavaScript.
- Den anden metode er eksplicit at tilføje en hændelseslytter på HTML-hændelsen, som kontrollerer for ' klik ' begivenhed.
Eksempel 1: Tildel en værdi til HTML-elementets onclick-attribut ved hjælp af JavaScript
I HTML-filen skal du oprette en overskrift og en knap ' Klik på mig ' med id ' js ” som vil udløse JavaScript-funktionen, mens du klikker på den.
< h2 > Sæt onClick ejendom med JavaScript h2 >
< knap-id = 'js' > Klik på mig knap >
I det følgende trin vil den oprettede knap blive åbnet og en ' onclick ” attribut vil blive knyttet til den. Ved et klik på knappen vil den angivne funktion blive udført, og ' stil.baggrundsfarve egenskaben ændrer knapfarven som følger:
dokument. getElementById ( 'js' ) . onclick = funktion jsFunc ( ) {
dokument. getElementById ( 'js' ) . stil . baggrundsfarve = 'lilla' ;
}
Det tilsvarende output vil være:
Eksempel 2: Tilføj eksplicit en begivenhedslytter til HTML-begivenheden
Opret en knap ' Klik her! ' og tildeler et id ' begivenhed ” til det, der vil udløse addEventListener()-metoden på 'klik' begivenhed:
< knap-id = 'begivenhed' > Klik her ! stærk > knap stærk >>
Hent knappen ved hjælp af dens id og vedhæft derefter en ' addEventListener() ' metode ved at sende en ' klik ' begivenhed og en funktion ' begivenhedFunc ” hvor knappens baggrundsfarve vil blive ændret:
dokument. getElementById ( 'begivenhed' ) . addEventListener ( 'klik' , eventFunc ) ;funktion begivenhedFunc ( ) {
dokument. getElementById ( 'begivenhed' ) . stil . baggrundsfarve = 'Grøn' ;
}
Produktion
Eksempel 3: Brug af alle onClick-metoder på én gang
I dette eksempel vil alle metoders virkemåde blive vist på én gang. For det første er standardmåden at tilføje onclick-attributten i selve HTML-tagget. Derefter er de to metoder til at indstille onclick-attributten ved hjælp af JavaScript også blevet demonstreret.
I det følgende eksempel skal du oprette tre knapper og se funktionaliteten af onclick-attributten.
- Den første knap ' Klik ' vil kalde ' htmlFunc() ” på klikbegivenheden.
- knappen ' Klik på mig ' vil blive tilgået med dets tildelte id ' js ” og tildel derefter en værdi til knappens onclick-attribut ved hjælp af JavaScript.
- knappen ' Klik her! ' vil blive tilgået ved hjælp af id ' begivenhed ' og vedhæft derefter en ' addEventListener() ” metode med det:
< knap-id = 'js' > Klik på mig knap >< br >< br >
< knap-id = 'begivenhed' > Klik her ! knap >
Nedenstående funktion vil udløse ' onclick ' begivenhed af knappen ' Klik ”:
funktion htmlFunc ( ) {alert ( 'Knappen klikket af HTML onClick-begivenhed' ) ;
}
Ved at klikke på ' Klik på Mig ” knappen, vil følgende funktion udløses, hvor en advarselsmeddelelse vil blive vist.
dokument. getElementById ( 'js' ) . onclick = funktion jsFunc ( ) {alert ( 'Knappen klikket af JavaScript onClick-funktionen' ) ;
}
Den givne funktion vil udløse knappen ' Klik her! ”:
dokument. getElementById ( 'begivenhed' ) . addEventListener ( 'klik' , eventFunc ) ;funktion begivenhedFunc ( ) {
alert ( 'Knappen, der blev klikket af JavaScript på Klik med EventListener-metoden' ) ;
}
Outputtet viser advarselsmeddelelser ved hvert knapklik:
Konklusion
For at indstille onclick med JavaScript er der to forskellige tilgange, den første er at tildele en værdi til HTML-elementets onclick-attribut ved hjælp af JavaScript, og den anden tilgang er eksplicit at tilføje en hændelseslytter på HTML-hændelsen, som tjekker for ' klik ' begivenhed. Denne tutorial har defineret metoderne til at indstille onClick med JavaScript sammen med eksempler.