logo

TechCodeview

JavaScript addEventListener()

De addEventListener() metoden brukes til å knytte en hendelsesbehandler til et bestemt element. Den overstyrer ikke eksisterende hendelsesbehandlere. Arrangementer sies å være en viktig del av JavaScript. En nettside svarer i henhold til hendelsen som har skjedd. Hendelser kan være brukergenerert eller generert av API-er. En hendelseslytter er en JavaScript-prosedyre som venter på at en hendelse skal inntreffe.

Metoden addEventListener() er en innebygd funksjon av JavaScript . Vi kan legge til flere hendelsesbehandlere til et bestemt element uten å overskrive de eksisterende hendelsesbehandlerne.

Syntaks

 element.addEventListener(event, function, useCapture);

Selv om den har tre parametere, parameterne begivenhet og funksjon er mye brukt. Den tredje parameteren er valgfri å definere. Verdiene til denne funksjonen er definert som følger.

Parameterverdier

begivenhet: Det er en nødvendig parameter. Den kan defineres som en streng som spesifiserer hendelsens navn.

Merk: Ikke bruk noen prefiks som 'på' med parameterverdien. Bruk for eksempel 'klikk' i stedet for å bruke 'onclick'.

funksjon: Det er også en nødvendig parameter. Det er en JavaScript-funksjon som reagerer på hendelsen.

c#-kodeeksempler

useCapture: Det er en valgfri parameter. Det er en boolsk typeverdi som spesifiserer om hendelsen utføres i boble- eller fangstfasen. Dens mulige verdier er ekte og falsk . Når den er satt til sann, kjører hendelsesbehandleren i fangstfasen. Når den er satt til usann, kjører behandleren i boblefasen. Standardverdien er falsk .

La oss se noen av illustrasjonene for bruk av addEventListener()-metoden.

Eksempel

Det er et enkelt eksempel på bruk av addEventListener()-metoden. Vi må klikke på den gitte HTML-knapp for å se effekten.

Eksempel på addEventListener()-metoden.

Klikk på følgende knapp for å se effekten.

Klikk meg document.getElementById('btn').addEventListener('klikk', moro); function fun() { document.getElementById('para').innerHTML = 'Hei verden' + '
' + 'Velkommen til javaTpoint.com'; }Test det nå

Produksjon

JavaScript addEventListener()

Etter å ha klikket på den gitte HTML-knappen, vil utgangen være -

JavaScript addEventListener()

Nå, i neste eksempel vil vi se hvordan du legger til mange hendelser til det samme elementet uten å overskrive de eksisterende hendelsene.

Eksempel

I dette eksemplet legger vi til flere hendelser til det samme elementet.

lesing fra en csv-fil i java

Dette er et eksempel på å legge til flere hendelser til samme element.

Klikk på følgende knapp for å se effekten.

returnerer arrays i java
Click me function fun() { alert('Velkommen til javaTpoint.com'); } function fun1() { document.getElementById('para').innerHTML = 'Dette er den andre funksjonen'; } function fun2() { document.getElementById('para1').innerHTML = 'Dette er tredje funksjon'; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('klikk', moro); mybtn.addEventListener('klikk', moro1); mybtn.addEventListener('klikk', moro2);Test det nå

Produksjon

JavaScript addEventListener()

Nå, når vi klikker på knappen, vil et varsel vises. Etter å ha klikket på den gitte HTML-knappen, vil utgangen være -

JavaScript addEventListener()

Når vi går ut av varselet, er utgangen -

JavaScript addEventListener()

Eksempel

I dette eksemplet legger vi til flere hendelser av en annen type til det samme elementet.

Dette er et eksempel på å legge til flere hendelser av forskjellig type til samme element.

Klikk på følgende knapp for å se effekten.

Click me function fun() { btn.style.width = '50px'; btn.style.height = '50px'; btn.style.background = 'gul'; btn.style.color = 'blå'; } function fun1() { document.getElementById('para').innerHTML = 'Dette er den andre funksjonen'; } function fun2() { btn.style.width = ''; btn.style.height = ''; btn.style.background = ''; btn.style.color = ''; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('mouseover', moro); mybtn.addEventListener('klikk', moro1); mybtn.addEventListener('mouseout', moro2);Test det nå

Produksjon

JavaScript addEventListener()

Når vi flytter markøren over knappen, vil utgangen være -

np.linspace
JavaScript addEventListener()

Etter å ha klikket på knappen og forlatt markøren, vil utgangen være -

JavaScript addEventListener()

Event Bubbling eller Event Capturing

Nå forstår vi bruken av den tredje parameteren til JavaScripts addEventListener(), dvs. useCapture.

I HTML DOM, Bobler og Fanger er de to måtene for forplantning av hendelser. Vi kan forstå disse måtene ved å ta et eksempel.

Anta at vi har et div-element og et avsnittselement inni det, og vi bruker 'klikk' begivenhet til begge ved hjelp av addEventListener() metode. Nå er spørsmålet om å klikke på avsnittselementet, hvilket elements klikkhendelse som håndteres først.

Så inn bobler, hendelsen til avsnittselementet håndteres først, og deretter håndteres div-elementets hendelse. Det betyr at i boble håndteres det indre elementets hendelse først, og deretter vil det ytterste elementets begivenhet bli håndtert.

I Fanger hendelsen til div-elementet håndteres først, og deretter håndteres avsnittselementets hendelse. Det betyr at ved å fange det ytre elementets hendelse håndteres først, og deretter vil det innerste elementets hendelse bli håndtert.

i.neste java 
 addEventListener(event, function, useCapture);

Vi kan spesifisere forplantningen ved å bruke useCapture parameter. Når den er satt til usann (som er standardverdien), bruker hendelsen bobleutbredelse, og når den er satt til sann, er det innfangningsutbredelsen.

Vi kan forstå bobler og fange ved hjelp av en illustrasjon.

Eksempel

I dette eksemplet er det to div-elementer. Vi kan se den boblende effekten på det første div-elementet og fangeeffekten på det andre div-elementet.

Når vi dobbeltklikker på span-elementet til det første div-elementet, håndteres span-elementets hendelse først enn div-elementet. Det kalles bobler .

Men når vi dobbeltklikker på span-elementet til det andre div-elementet, håndteres div-elementets hendelse først enn span-elementet. Det kalles fange .

 div{ background-color: lightblue; border: 2px solid red; font-size: 25px; text-align: center; } span{ border: 2px solid blue; } This is a div element. <br> <br> <span id="s2"> This is a span element. </span> document.getElementById(&apos;d1&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on div element&apos;)}, false); document.getElementById(&apos;s1&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on span element&apos;)}, false); document.getElementById(&apos;d2&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on div element&apos;)}, true); document.getElementById(&apos;s2&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on span element&apos;)}, true);
Test det nå

Produksjon

JavaScript addEventListener()

Vi må dobbeltklikke på de spesifikke elementene for å se effekten.