Hvordan du setter OnClick med JavaScript

En hendelse er en handling iverksatt av en nettleser eller en bruker. JavaScript -konseptet med hendelsesbehandlere eller lyttere kan brukes til å håndtere disse hendelsene. En viss hendelse utløser utførelsen av en hendelseslytter. En av disse begivenhetslytterne er "ved trykk.”Når en bruker klikker på et element, utløses en OnClick Event Lytter.

Denne opplæringen vil definere prosedyren for hvordan du angir klikk med JavaScript.

Hvordan du setter OnClick med JavaScript

Å 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: Tildel en verdi til HTML -elementets OnClick -attributt ved hjelp av 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.

Sett OnClick -eiendom med JavaScript

Klikk på meg

I det følgende trinnet vil den opprettede knappen få tilgang til og en "ved trykk”Attributt vil være knyttet til den. På knappeklikk blir den spesifiserte funksjonen utført og "stil.bakgrunnsfarge”Eiendom vil endre knappfargen som følger:

dokument.getElementById ("JS").onClick = funksjon jSfunc ()
dokument.getElementById ("JS").stil.BakgrunnColor = "Purple";

Tilsvarende utgang vil være:

Eksempel 2: Legg eksplisitt til en hendelseslytter på HTML -arrangementet

Opprett en knapp "Klikk her!”Og tildeler en ID”begivenhet”Til det som vil utløse AddEventListener () -metoden på “Klikk” begivenhet:

Klikk her!knapp>

Hent knappen ved hjelp av sin id og deretter legge ved en "AddEventListener ()”Metode ved å passere en“Klikk”Hendelse og en funksjon”EventFunc”Hvor bakgrunnsfargen på knappen vil bli endret:

dokument.getElementById ("Event").AddEventListener ("Klikk", EventFunc);
funksjon eventfunc ()
dokument.getElementById ("Event").stil.BakgrunnColor = "Green";

Produksjon

Eksempel 3: Bruke alle OnClick -metoder samtidig

I dette eksemplet vil arbeidet med alle metodene vises på en gang. Først er standard måten å legge til OnClick -attributtet i selve HTML -taggen. Etter det er de to metodene for å sette OnClick -attributtet ved hjelp av JavaScript også påvist.

I det følgende eksempelet, lag tre knapper og se funksjonaliteten til OnClick -attributtet.

• Den første knappen "Klikk”Vil kalle“htmlfunc ()”På klikkhendelsen.
• Knappen "Klikk på meg”Får tilgang til med sin tildelte ID”JS”Og tilordne en verdi til knappens OnClick -attributt ved hjelp av JavaScript.
• Knappen "Klikk her!”Får tilgang til ved hjelp av ID”begivenhet”Og vedlegg deretter en“AddEventListener ()”Metode med den:

Klikk


Klikk på meg


Klikk her!

Nedenfor -funksjonen vil utløse “ved trykk”Hendelse av knappen”Klikk”:

funksjon htmlfunc ()
ALERT ("Knappen klikket av HTML OnClick Event");

For å klikke på “Klikk på meg”-Knappen, vil følgende funksjon utløse hvor en advarselmelding vises.

dokument.getElementById ("JS").onClick = funksjon jSfunc ()
Alert ("Knappen klikket av JavaScript OnClick -funksjonen");

Den gitte funksjonen vil utløse knappen "Klikk her!”:

dokument.getElementById ("Event").AddEventListener ("Klikk", EventFunc);
funksjon eventfunc ()
Alert ("Knappen klikket av JavaScript OnClick med EventListener -metoden");

Utgangen vil vise varselmeldinger på 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 til "Klikk" begivenhet. Denne opplæringen har definert metodene for å stille inn klikk med JavaScript sammen med eksempler.