Hvordan legge til en hendelsesbehandler i vindusobjektet i JavaScript

Nettleservinduet som automatisk opprettes er kjent som en vindusobjekt. Det regnes som objektet i nettleseren, ikke av JavaScript. Hvis du leser denne artikkelen i favorittleseren din, representerer den gjeldende fanen vindusobjektet. Vindusobjektet kan bruke vinduets bredde, høyde, varsler og spørsmål.

Ved hjelp av AddEventListener () Metode, en JavaScript -programmerer kan legge til Arrangementshåndterere til et bestemt vindusobjekt. Denne metoden lar deg kontrollere reaksjonen for den tilsvarende hendelsen. JavaScript er isolert fra HTML -teksten når du bruker AddEventListener () -metoden, noe som gjør det enkelt å forstå og gjøre det mulig for deg å legge til hendelseslyttere selv om du ikke har kontroll over HTML -markeringen.

Denne oppskrivningen vil diskutere prosedyren for å legge til hendelsesbehandlere til vindusobjektet i et JavaScript-program. Videre vil eksemplene relatert til bruken av AddEventListener () -metoden også bli demonstrert. Så la oss starte!

Legge til hendelsesbehandlere til vindusobjektet i JavaScript

Som JavaScript -programmerer kan du bruke AddEventListener () -metoden for å legge til en hendelseslytter til et hvilket som helst HTML -objekt. Det eksisterer en annen “på”JavaScript -egenskap som brukes til samme formål; Imidlertid er det ikke mye nyttig sammenlignet med AddEventListener () -metoden fordi AddEvEntListener () -metoden tillater deg å legge til flere hendelseslyttere på et vindusobjekt eller HTML -element.

Syntaks av AddEvEnlistener () -metode

gjenstand.AddEventListener (hendelse, funksjon, usecapture);

Her, den første parameteren, “begivenhet”Legges til for å spesifisere hendelsen du vil legge til hendelsesbehandleren; den andre parameteren, “funksjon”Påkaller funksjonen som vil bli utført når den spesifiserte hendelsen oppstår. Den siste parameteren er valgfri som kan være hendelsesfangst eller bobling.

Eksempel 1: Legge til en hendelsesbehandler i vindusobjektet i JavaScript

Vi vil legge til AddEventListener () -metoden til “vindu”Objekt i følgende eksempel. Den ekstra AddEventListener () -metoden vil bli utløst når en bruker utfører “Mousedown" handling:

JavaScript AddEventListener ()

Dette eksemplet bruker AddEventListener () -metoden på vindusobjektet.

Vi kan også passere en "begivenhet”Objekt til AddEvEntListener () -metoden. “begivenhet”Objekt omfatter all informasjonen relatert til Mousedown -hendelsen:

Utfør ovennevnte program i din favorittkodeditor eller en hvilken som helst online kodende sandkasse; Imidlertid vil vi bruke JSBIN til dette formålet:

Utførelse av det ovennevnte JavaScript-programmet vil vise følgende utgang:

Nå, venstre klikk på skjermen, og du vil se følgende varsel:

Eksempel 2: Legge til en hendelsesbehandler for museklikk -arrangement i JavaScript

Dette eksemplet vil vise deg prosedyren for å legge til en hendelsesbehandler for musen “Klikk”Arrangement i JavaScript. I dette eksemplet legger vi ikke til hendelsen direkte til vindusobjektet, men til dokumentobjektet.

For det første vil vi legge til en overskrift med

Tag, et avsnitt med

Tag, og en knapp ved å bruke taggen:

Legg til en hendelsesbehandler i JavaScript

Dette JavaScript -programmet benyttet AddEventListener () -metoden

Vi har også lagt til en ID “knapp1" for vår "Klikk på meg”Knapp:

> Klikk meg

GetElementById -metoden vil bli påkalt for å finne og få knappen til å ha “knapp1”Id. Etter det, “AddEventListener ()”Metoden vil legge til en“Klikk”Hendelse som vil utløse“DisplayDate ()”Metode:

Etter å ha fått utdataene, klikker du på "Klikk på meg”-Knappen for å sjekke gjeldende tid og dato:

Konklusjon

Ved hjelp av AddEventListener () -metoden kan du legge til en hendelsesbehandler i vindusobjektet og HTML -elementer. Uten å overskrive de eksisterende hendelsesbehandlerne, tildeler AddEventListener () JavaScript -metoden en hendelsesbehandler til det spesifikke objektet, og et enkelt vindusobjekt kan også ha flere hendelsesbehandlere. Denne oppskrivningen diskuterte prosedyren for å legge til hendelsesbehandlere til vindusobjektet i et JavaScript-program, og eksemplene relatert til bruken av AddEvEnlistener () -metoden er også demonstrert også.