Hva er JavaScript -hendelser
Du sykler i en bil og et signal kommer, det er rødt, du stopper. Når signalet blir grønt, begynner du å kjøre igjen. Handlingene dine var basert på et eller annet signal gitt deg. Det samme gjelder hendelser. Når du programmerer, vil du at noen handlinger skal utføres ved å klikke på en knapp eller trykke på en tast. Klikk på knappen eller trykket på en nøkkel genererer en hendelse. Basert på denne hendelsen utføres noe handling. For eksempel er det en artikkel og en knapp som leser “Vis mer”. Når du klikker på den knappen, blir hele artikkelen synlig
I dette innlegget skal vi diskutere alt om hendelser med eksempler.
Hva er en begivenhet
For å si det enkelt, er en hendelse en handling utført av en bruker eller initiert av nettleseren. JavaScript reagerer/reagerer på den handlingen; Denne reagerer/svarer på hendelsen kalles hendelseshåndtering. Arrangementshåndtering er bare et stykke kode skrevet av utvikleren. Dette kodestykket kjører når hendelsen utløses. Arrangementshåndterere kalles også hendelseslyttere. Hendelser blir avfyrt i nettleservinduet og er relatert eller knyttet til en enkelt eller et sett med elementer. Hendelser er av mange forskjellige typer. Noen av dem er:
- Bruker trykker på en tast på tastaturet
- Bruker henger over et element
- Bruker klikker et element via mus
- Bruker lukker nettleseren
- Brukeren endrer nettleseren
- Nettsiden lastes inn eller er ferdig med lasting
- Når en feil oppstår
- Bruker sender inn et skjema
JavaScript -hendelser
JavaScript Gir oss en haug med hendelser. Det er umulig å oppgi dem alle og forklare dem alle under en artikkel. Her vil jeg bare liste opp de vanligste:
Inputhendelser
- blåere
- endring
- fokus
- Keyup/KeyDown
- tastetrykk
Mushendelser
- Mus over
- Mouseout
- Mousedown/Mouseup
Klikk på hendelser
- Klikk
- Dblclick
Last inn hendelser
- laste
- lesse
- feil
- Endre størrelse
Nå som vi har diskutert teorien, la oss gå til det praktiske og diskutere noen eksempler på det virkelige livet på JavaScript -hendelser. Anta at jeg har en knapp, og når jeg klikker på den knappen, vil jeg at et varsel skal vises til brukeren. Klikkingen av knappen utløser hendelsen og deretter en kodeblokk vil håndtere hendelsen og reagere ved å vise et varsel.
Dette er en enkel knapp i en HTML -fil. Nå får vi knappen via klassenavnet og deretter håndtere hendelsen I-E-klikk.
const btn = dokument.QuerySelector (".Klikk på meg");btn.AddEventListener ('klikk', funksjon ()
Varsel ("Du klikket på knappen");
);
Legg denne koden i en skriptetag eller lag en annen fil med JS -utvidelse og legg den der.
Når vi klikker på knappen, vises et varsel:
Det er også andre måter vi kan implementere dette, for eksempel:
const btn = dokument.QuerySelector (".Klikk på meg");btn.onClick = funksjon ()
Varsel ("Du klikket på knappen");
;
Eller:
const btn = dokument.QuerySelector (".Klikk på meg");funksjon ClickedMe ()
Varsel ("Du klikket på knappen");
;
btn.OnClick = ClickedMe;
HTML-filen i-e knappen forblir den samme.
Merk: Du kan sette JavaScript -koden din i en skriptetag og deretter kjøre HTML -filen din i nettleseren ved hjelp av Live Server eller opprette en annen fil med JS -utvidelse og referere den inn i overskriften til HTML -filen.
La oss nå se på et annet eksempel: Anta at vi har et registreringsskjema. I skjemaet har vi to inngangsfelt, og vi ønsker å legge validering. Hvis brukeren sender inn skjemaet, vil vi sjekke om brukeren fylte begge inngangene eller lot det være tom. Hvis begge eller en av dem er tomme, viser vi et varsel om at feltet er tomt. Ellers viser vi et varsel som sier at brukeren har registrert seg:
Da vi forlot passordfeltet tomt og klikket på registeret, utløste en hendelse I-E-send. Men basert på vår behandler inngangsfeltet “Passord”Var tomt derav en melding”Vennligst fyll de nødvendige feltene" er vist.
Da vi fylte begge feltene og klikket på registerknappen, "Registrert" ble vist.
Konklusjon
Hendelser og hendelseshåndtering er virkelig viktige konsepter av JavaScript. Når en bruker samhandler med en webside, utløses en hendelse. JavaScript gir hendelsesbehandlere for å svare på disse hendelsene og gjøre websider mer interaktiv mens de gir oppslukende brukeropplevelse. I de begivenhetsbehandlerne kan vi legge vår egen kode og logikk og lage noe vakkert.
I dette innlegget diskuterte vi kort hva JavaScript -hendelsene er og hvordan vi kan takle dem; Så flyttet vi inn på hvilke typer arrangementer og hendelsesbehandlere og deres virkelige applikasjoner.