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
Etter å ha klikket på den gitte HTML-knappen, vil utgangen være -
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 javaClick 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
Nå, når vi klikker på knappen, vil et varsel vises. Etter å ha klikket på den gitte HTML-knappen, vil utgangen være -
Når vi går ut av varselet, er utgangen -
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
Når vi flytter markøren over knappen, vil utgangen være -
np.linspace
Etter å ha klikket på knappen og forlatt markøren, vil utgangen være -
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('d1').addEventListener('dblclick', function() {alert('You have double clicked on div element')}, false); document.getElementById('s1').addEventListener('dblclick', function() {alert('You have double clicked on span element')}, false); document.getElementById('d2').addEventListener('dblclick', function() {alert('You have double clicked on div element')}, true); document.getElementById('s2').addEventListener('dblclick', function() {alert('You have double clicked on span element')}, true);Test det nå
Produksjon
Vi må dobbeltklikke på de spesifikke elementene for å se effekten.