Arrangementer i JavaScript | Forklart med eksempler
JavaScript er kjent for å gi en webside muligheten til å "tenke og handle" som alt er mulig på grunn av hendelser. Hendelser fungerer som utløsere som ber backend -skriptene til å utføre handlinger. De kan lett omtales som "tingene" Det skjer på en webside, disse hendelsene kan være hva som helst: å laste inn en webside, klikke på en HTML -knapp eller sveve musen over et spesifikt HTML -element.
Det er gazillioner av hendelser som kan utløse JavaScript, vi har hendelser for å utløse en funksjon på museklikk, eller på mushverdøyen, men vi kommer til å dekke arbeid med hendelser og JavaScript.
Et enkelt eksempel på at en JavaScript -hendelse som blir utført på en knappetrykk vises nedenfor:
Arrangementshåndterere
Arrangementer administreres av hendelsesbehandlere; HTML gir muligheten til å legge til forskjellige typer hendelsesbehandlere på sine elementer, disse hendelsesbehandlerne lar programmereren kjøre JavaScript -kode ved å utføre en funksjon.
Det er tre typer hendelsesbehandlere:
- Dom-på-arrangement lytter
- Lytter på linje
- AddEventListener () -metode
DOM-lytteren på hendelsen
Vi kan bruke hendelseslyttere på DOM -egenskapene, for eksempel å utløse en hendelse ved fullstendig lasting av nettsiden. Disse hendelseslytterne kan også legges til HTML -elementer, men med begrensningen er en hendelseslytter per hvert HTML -element.
For eksempel ønsker vi å varsle brukeren om fullstendig lasting av nettsiden, vi kan gjøre det ved å få tilgang til vindusobjektet til DOM:
Etter å ha kjørt HTML -filen vil du se følgende utdata:
Som du kan se, etter å ha lastet nettsiden helt.
Merk: Vindusobjektet brukes til å jobbe med globale hendelser.
Den inline-event-lytteren
En av de trivielle metodene når vi jobber med HTML og JavaScript er å bruke de inline begivenhetslytterne, vi gjør dette ved å legge til hendelseslytteren som et attributt av elementet inne i taggen.
For eksempel, i eksemplet ovenfor, la vi til en "ved trykk()" Hendelse inne i knappelementet, når vi bruker den inline begivenhetslytteren, setter vi den lik en funksjon som vil bli påberopt når hendelsen utløses.
Som du kan se, btnclicked () er funksjonen som vil bli utført på et knappeklikk.
Hvis vi vil skrive ut strengen for å konsollere “Du har trykket på knappen”, kan vi gjøre det ved å skrive btnclicked () funksjon som dette:
Når du kjører HTML -filen, får du følgende utdata.
Bruke AddEventListener ()
Den tredje hendelsesbehandleren legges til ved hjelp av AddEventListener () -metoden, dette er den nye og mest brukte måten å håndtere hendelser i JavaScript; For å vise dette, skal vi opprette en div i HTML ved å bruke følgende kodelinjer:
AddEventListener () Eksempel
For å legge til en hendelseslytter på dette div Du skal bruke følgende skriptutdrag:
Hvis du ser nøye på skriptutdraget, vil du legge merke til at vi legger til 3 forskjellige hendelseslyttere på denne diven, en når markøren kommer inn i diven, andre når markøren forlater div og siste når markøren klikker på div; Etter å ha skrevet all denne koden, lagre den, last inn siden på nytt, så får du følgende utdata:
Som du kan se i konsollen, fungerer våre hendelsesbehandlere og JavaScript -koden blir utført.
Det er det for arrangementer i JavaScript
Konklusjon
Hendelser i JavaScript er forekomsten av slike tilfeller som ber JavaScript til å utføre en viss manipulering på HTML-elementene eller til å utføre back-end-funksjonalitet. Arrangementet i JavaScript brukes til å gi HTML -websiden muligheten til å tenke og utføre handlinger, disse hendelsene kan være alt som en bruker gjør: å klikke på en knapp, trykke på en spesifikk tast, eller en spesifikk musebevegelse. Det er også noen globale hendelser som kan nås ved hjelp av vindusobjektet, for eksempel vinduet.laste(). Vi lærte om forskjellige typer hendelsesbehandlere sammen med eksemplene deres.