logo

TechCodeview

JavaScript addEventListener()

Det addEventListener() metode bruges til at knytte en hændelseshandler til et bestemt element. Det tilsidesætter ikke de eksisterende hændelseshandlere. Begivenheder siges at være en væsentlig del af JavaScript. En webside reagerer i henhold til den hændelse, der fandt sted. Hændelser kan være brugergenereret eller genereret af API'er. En hændelseslytter er en JavaScript-procedure, der venter på, at en hændelse opstår.

Metoden addEventListener() er en indbygget funktion af JavaScript . Vi kan tilføje flere hændelseshandlere til et bestemt element uden at overskrive de eksisterende hændelseshandlere.

Syntaks

 element.addEventListener(event, function, useCapture);

Selvom den har tre parametre, er parametrene begivenhed og fungere er meget brugt. Den tredje parameter er valgfri at definere. Værdierne for denne funktion er defineret som følger.

Parameterværdier

begivenhed: Det er en påkrævet parameter. Det kan defineres som en streng, der angiver begivenhedens navn.

Bemærk: Brug ikke noget præfiks såsom 'on' med parameterværdien. Brug for eksempel 'klik' i stedet for at bruge 'onclick'.

fungere: Det er også en nødvendig parameter. Det er en JavaScript funktion som reagerer på hændelsen.

java mens tilstand

useCapture: Det er en valgfri parameter. Det er en boolsk typeværdi, der angiver, om hændelsen udføres i boble- eller indfangningsfasen. Dens mulige værdier er rigtigt og falsk . Når den er sat til sand, udfører hændelseshandleren i optagelsesfasen. Når den er indstillet til falsk, udfører handleren i boblefasen. Dens standardværdi er falsk .

Lad os se nogle af illustrationerne af brugen af ​​addEventListener() metoden.

Eksempel

Det er et simpelt eksempel på brug af addEventListener() metoden. Vi skal klikke på det givne HTML-knap for at se effekten.

Eksempel på addEventListener()-metoden.

Klik på følgende knap for at se effekten.

Klik mig document.getElementById('btn').addEventListener('klik', sjovt); function fun() { document.getElementById('para').innerHTML = 'Hej verden' + '
' + 'Velkommen til javaTpoint.com'; }Test det nu

Produktion

JavaScript addEventListener()

Efter at have klikket på den givne HTML-knap, vil outputtet være -

JavaScript addEventListener()

Nu vil vi i det næste eksempel se, hvordan man tilføjer mange begivenheder til det samme element uden at overskrive de eksisterende begivenheder.

Eksempel

I dette eksempel tilføjer vi flere hændelser til det samme element.

mysql unikke nøgle

Dette er et eksempel på tilføjelse af flere hændelser til det samme element.

Klik på følgende knap for at se effekten.

java input streng
Click me function fun() { alert('Velkommen til javaTpoint.com'); } function fun1() { document.getElementById('para').innerHTML = 'Dette er anden funktion'; } function fun2() { document.getElementById('para1').innerHTML = 'Dette er tredje funktion'; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('klik', sjovt); mybtn.addEventListener('klik', sjov1); mybtn.addEventListener('klik', sjov2);Test det nu

Produktion

JavaScript addEventListener()

Nu, når vi klikker på knappen, vil en advarsel blive vist. Efter at have klikket på den givne HTML-knap, vil outputtet være -

JavaScript addEventListener()

Når vi forlader alarmen, er outputtet -

JavaScript addEventListener()

Eksempel

I dette eksempel tilføjer vi flere hændelser af en anden type til det samme element.

Dette er et eksempel på tilføjelse af flere hændelser af forskellig type til det samme element.

Klik på følgende knap for at 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 anden funktion'; } funktion fun2() { btn.style.width = ''; btn.style.height = ''; btn.style.background = ''; btn.style.color = ''; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('mouseover', sjov); mybtn.addEventListener('klik', sjov1); mybtn.addEventListener('mouseout', sjov2);Test det nu

Produktion

JavaScript addEventListener()

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

np.linspace
JavaScript addEventListener()

Når du har klikket på knappen og forladt markøren, vil outputtet være -

JavaScript addEventListener()

Event Bubbling eller Event Capturing

Nu forstår vi brugen af ​​den tredje parameter i JavaScripts addEventListener(), dvs. brug Capture.

I HTML DOM, Bobler og Fangst er de to måder at udbrede begivenheder på. Vi kan forstå disse måder ved at tage et eksempel.

Antag, at vi har et div-element og et afsnitselement inde i det, og vi anvender 'klik' begivenhed til dem begge ved hjælp af addEventListener() metode. Nu er spørgsmålet om at klikke på afsnitselementet, hvilket elements klikhændelse håndteres først.

Så i bobler, hændelsen af ​​afsnitselementet håndteres først, og derefter håndteres div-elementets hændelse. Det betyder, at i bubbling håndteres det indre elements begivenhed først, og derefter vil det yderste elements begivenhed blive håndteret.

I Fangst hændelsen af ​​div-elementet håndteres først, og derefter håndteres afsnitselementets hændelse. Det betyder, at ved indfangning af det ydre elements begivenhed håndteres først, og derefter vil det inderste elements begivenhed blive håndteret.

i.næste java 
 addEventListener(event, function, useCapture);

Vi kan specificere udbredelsen ved hjælp af brug Capture parameter. Når den er indstillet til falsk (som er dens standardværdi), så bruger hændelsen boblende udbredelse, og når den er sat til sand, er der indfangningsudbredelsen.

Vi kan forstå boblende og at fange ved hjælp af en illustration.

Eksempel

I dette eksempel er der to div-elementer. Vi kan se den boblende effekt på det første div-element og den indfangende effekt på det andet div-element.

Når vi dobbeltklikker på span-elementet i det første div-element, så håndteres span-elementets hændelse først end div-elementet. Det kaldes boblende .

Men når vi dobbeltklikker på span-elementet i det andet div-element, så håndteres div-elementets hændelse først end span-elementet. Det kaldes at 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 nu

Produktion

JavaScript addEventListener()

Vi skal dobbeltklikke på de specifikke elementer for at se effekten.