Dom Event Lytter Method i JavaScript

Du kan legge til hendelseslytteren til HTML DOM -elementene ved hjelp av AddEventListener () metode. AddEventListener () -metoden tillater 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 kontrollerer HTML -markeringen.

Denne oppskrivningen vil diskutere Dom Event Lytter Metode i JavaScript. Vi vil forklare bruken av DOM -hendelseslyttermetoden for å legge til enkelt- og flere håndterere til HTML -elementene. Videre vil eksempler relatert til hendelsesbobling og begivenhetsfangst også bli demonstrert. Så la oss starte!

Dom Event Lytter Method i JavaScript

Som en JavaScript -programmerer kan du bruke DOM AddEventListener () -metoden for å legge til en hendelseslytter på et hvilket.

Det eksisterer en annen "på" JavaScript -egenskap som brukes til samme formål; Imidlertid er det ikke mye nyttig sammenlignet med AddEventListener () -metoden fordi DOM 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" blir lagt til for å spesifisere hendelsen du vil legge til hendelsesbehandleren; den andre parameteren, "funksjon" påkaller funksjonen som skal utføres når den spesifiserte hendelsen oppstår. Den tredje parameteren er valgfri; der du må legge til en av“Hendelsesfangst” eller “Event Bubbling”.

Eksempel 1: Bruke DOM -enters lyttermetode for å legge til en hendelsesbehandler i JavaScript

Dette eksemplet vil vise deg prosedyren for å legge til en DOM -hendelseslyttermetode for musens "klikk" -hendelse i JavaScript. For det første vil vi legge til en overskrift med

Tag, et avsnitt med

Tag, og en knapp ved å bruke taggen:

Dom Event Lytter Method i JavaScript

Dette JavaScript -programmet benyttet AddEventListener () -metoden

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

Klikk på meg

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

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

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

Eksempel 2: Bruke DOM -enters lyttermetode for å legge til flere hendelsesbehandlere i JavaScript

JavaScript tilbyr også funksjonaliteten for å legge til flere hendelsesbehandlere for samme objekt. For å demonstrere prosedyren har vi skrevet følgende JavaScript -program med en overskrift, avsnitt og en knapp som har “Button1” id. Merk at vi vil legge til flere hendelsesbehandlere for "knapp" HTML -element:

Legg til en hendelsesbehandler i JavaScript

Dette JavaScript -programmet benyttet AddEventListener () -metoden

Klikk på meg

I neste trinn vil vi en "en" objekt som vil finne og få knappen med “Button1” id gjennom å påkalle dokumentet.getElementById () Metode:

Slå den "Klikk på meg" Knapp, og du får to varsler i nettleseren din, etter hverandre:

Eksempel 3: Bruke DOM Event Listener Method for å legge til hendelsesbehandler i vindusobjektet i JavaScript

I det følgende eksemplet legger vi til AddEventListener () -metoden til "vindu" gjenstand. 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 vil også passere en "begivenhet" objekt til AddEventListener () -metoden. De "begivenhet" objektet omfatter all informasjonen relatert til Mousedown begivenhet:

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

Nå, trykk på "venstre" Museknapp over det valgte elementet, og du vil se følgende varsel:

Arrangement bobling i JavaScript

I JavaScript er Event Bubbling en hendelse som bobler opp fra målet eller de dypeste elementene til foreldrene, så følger den bunn til topp tilnærming og flytter kontrollstrømmen til forfedrene. Hendelsesbobling anses som standard hendelsesflytmetode i alle moderne nettlesere.

Eksempel: Event Bubbling i JavaScript

I det følgende eksempel har vi lagt til en tittel med taggen, et divelement med ID “ParentElement” og det nestede barneknappelementet har ID “Childelement”:

Barn

Etter å ha tilordnet de opprettede HTML -elementene ved å bruke "dokument.QuerySelector () ” Metode, vi vil legge til en hendelseslytter til begge Div “ParentElement” og det er nestet “Childelement” knapp. Funksjonen passerte i “AddEventListener ()” vil vise den ekstra strengen i “Konsoll.Logg()" metode:

Nå vil vi klikke på "Barn" Knapp, som kan sees i følgende utdata:

Ved å klikke på "Barn" knapp, den passerte "funksjon()" I AddEvEnlistener () -metoden vil bli utført. Og så "ved trykk()" metode for “Div” elementet vil bli påkalt. Alt dette skjer på grunn av “Event Bubbling”:

I det ovennevnte eksemplet, når vi har klikket på "Barn" knapp, The “Klikk” Arrangementet sendes fra knappen med ID “Childelement” og hendelsesflytkontroll beveger seg til "dokument" I følgende rekkefølge:

Arrangementsfangst i JavaScript

Prosessen der en hendelse fanges opp når strømmen av kontrollen beveger seg fra toppelementet til målet eller det ytterste elementet er kjent som hendelsesfangst. Selv om moderne nettlesere ikke har muligheten til å aktivere hendelsesfangst som standard, kan du utføre denne operasjonen gjennom JavaScript -kode.

Eksempel: Hendelsesfangst i JavaScript

I vårt JavaScript -program, først og fremst, vil vi legge til en tittel og en “Div” element som har id “ParentElement” og dets barnelement med “Childelement” id:

Barn

Deretter vil vi påkalle "dokument.QuerySelector () ” Metode for å få foreldre og barnelement:

Følgende "Barn" Knappen vil først påkalle hendelsen som er lagt til overordnede element. Etter det vil den utføre hendelsen knyttet til arrangementets mål:

I det ovennevnte eksemplet, når vi har klikket på "Barn" knapp, The “Klikk” Arrangementet sendes fra overordnede element som er "dokument" til det spesifiserte hendelsesmålet “Childelement” knapp:

Konklusjon

Ved hjelp av DOM AddEventListener () -metoden kan du legge til en hendelseslytter i vindusobjektet og HTML -elementer. Uten å overskrive de eksisterende hendelsesbehandlerne, tildeler AddEventListener () JavaScript -metoden en hendelsesbehandler til det spesifikke objektet. Et enkelt vindusobjekt kan også ha flere hendelsesbehandlere. Denne oppskrivningen diskuterte DOM-hendelseslyttermetoden i JavaScript. Vi forklarte også bruken av DOM -hendelseslyttermetoden for å legge til enkelt- og flere håndterere til HTML -elementene. Videre er eksempler relatert til hendelsesbobling og fangst av hendelser også demonstrert.