AddEventListener vs OnClick i JavaScript
Mens du lager websider for et nettsted, kan det være et krav å plassere noen ekstra funksjonaliteter for forbedrede funksjoner. For eksempel, i tilfelle av automatiseringstesting, kan du sjekke arbeidet med forskjellige funksjonaliteter på hendelsesutløseren. I slike tilfeller gir JavaScript to viktige teknikker som hjelper til.
Denne håndboken vil teoretisk og praktisk sammenligne AddEventListener og OnClick -hendelsen.
AddEventListener vs OnClick i JavaScript
I JavaScript, "AddEventListener ()”Metode og“ved trykk”Arrangement fungerer begge for en hendelse og kan kjøre en tilbakeringingsfunksjon når en knapp klikkes. De er imidlertid ikke helt de samme.
AddEventListener () -metoden inkluderer en hendelse i argumentet. Dessuten kan den bruke flere hendelsesbehandlere på samme element og overskriver ikke flere hendelsesbehandlere samtidig. Mens OnClick -hendelsen utløses når brukeren klikker på den tilsvarende knappen mot hendelsen. Det er bare en egenskap til HTMLElement -objektet og kan overskrives, i motsetning til AddEventListener () -metoden.
Syntaks
element.AddEventListener (arrangement, lytter, usecapture);I den gitte syntaksen, “begivenhet”Henviser til den spesifiserte hendelsen,”lytter”Er funksjonen som vil bli påberopt, og“Bruket”Er den valgfrie verdien.
Syntaks
Html
I den gitte syntaksen, “element”Indikerer elementet som“ved trykk”Arrangementet vil være tilknyttet. Her, “Myscript”Refererer til funksjonen som vil bli kalt som OnClick -hendelsen vil oppstå.
JavaScript
gjenstand.onClick = funksjon () MyScript;Tilsvarende i syntaks ovenfor, "gjenstand”Henviser til objektet tilknyttet OnClick -hendelsen.
Kjerneforskjeller mellom AddEventListener og OnClick -arrangementet
| AddEventListener | ved trykk |
| AddEventListener -metoden kan bare legges til i JavaScript. | OnClick kan inkluderes i HTML så vel som i JavaScript. |
| AddEventListener fungerer ikke i de eldre versjonene av noen nettlesere. | OnClick er kompatibel med alle nettlesere. |
| Denne funksjonen kan knytte flere hendelser til et bestemt element. | Denne hendelsen knytter bare en enkelt hendelse til et element. |
| Den kan ikke koble HTML- og JavaScript -filer. | Onclick -hendelsen kan koble funksjonalitetene til HTML og JavaScript. |
La oss nå gå gjennom følgende eksempler for å forstå den uttalte forskjellen tydelig.
Eksempel: AddEventListener () -metode for å oppdage om den aktuelle nøkkelen trykkes
I dette spesielle eksemplet, bruk "dokument.AddEventListener ()”Metode og fest en hendelse som heter“Keydown”I sitt argument. Dette vil føre til å varsle brukeren via varsel når "Tast inn”Nøkkel er trykket på:
dokument.AddEventListener ("KeyDown", (e) =>hvis (e.tast == "Enter")
Varsel ("Enter -tasten er trykket på")
);
Tilsvarende utgang vil være:
Eksempel: OnClick -hendelse for å endre knappfarge
I det følgende eksemplet vil vi opprette en knapp med "knapp”Id. Deretter, ta med en "ved trykk”Hendelse som vil påkalle Function ButtonColor () på knappeklikk:
Nå, definer en funksjon som heter “ButtonColor ()”. I funksjonsdefinisjonen får du tilgang til knappen ved å bruke "dokument.GeelementById ()”Metode. Bruk også stilen.Bakgrunnsfargeegenskaper for å stille inn knappens farge og tilordne den en RGB -fargekode som bakgrunn:
funksjon ButtonColor ()dokument.getElementById ("knapp").stil.BakgrunnColor = '#911';
Produksjon
Eksempel: OnClick -hendelse for å endre knappfarge ved hjelp av JavaScript
Det ovennevnte eksemplet kan brukes ved å legge til "ved trykk”Arrangement i JavaScript -kode. For å gjøre det, for det første, oppretter en knapp ved hjelp av “" stikkord:
Nå, hent den opprettede knappen ved å bruke “dokument.getElementById ()”Metode og bruk“ved trykk”Arrangement på det. Gjenta alle de videre trinnene for å endre knappens farge:
La knapp = dokument.getElementById ("knapp")knapp.onClick = funksjon ButtonColor ()
dokument.getElementById ("knapp").stil.BakgrunnColor = '#911';
Det vil resultere i samme utgang:
Vi har diskutert forskjellene mellom AddEventListener og OnClick i JavaScript.
Konklusjon
Hovedforskjellen mellom AddEventListener -funksjonen og OnClick -hendelsen er at AddEventListener kan knytte flere hendelser til et enkelt HTML -element, mens OnClick -hendelsen bare kan knytte klikkhendelsen til en knapp. Dessuten kan AddEventListener bare brukes med JavaScript -koden, og OnClick -arrangement fungerer i både HTML- og JavaScript -filer. Denne håndboken guidet om AddEventListener -metoden og OnClick -hendelsen både teoretisk og praktisk.