logo

TechCodeview

JavaScript addEventListener()

De addEventListener() metod används för att koppla en händelsehanterare till ett visst element. Den åsidosätter inte befintliga händelsehanterare. Händelser sägs vara en viktig del av JavaScript. En webbsida svarar enligt händelsen som inträffade. Händelser kan vara användargenererade eller genererade av API:er. En händelseavlyssnare är en JavaScript-procedur som väntar på att en händelse inträffar.

Metoden addEventListener() är en inbyggd funktion av JavaScript . Vi kan lägga till flera händelsehanterare till ett visst element utan att skriva över befintliga händelsehanterare.

Syntax

 element.addEventListener(event, function, useCapture);

Även om den har tre parametrar, parametrarna händelse och fungera används i stor utsträckning. Den tredje parametern är valfri att definiera. Värdena för denna funktion definieras enligt följande.

Parametervärden

händelse: Det är en obligatorisk parameter. Det kan definieras som en sträng som anger händelsens namn.

Obs: Använd inte något prefix som 'på' med parametervärdet. Använd till exempel 'klicka' istället för att använda 'onclick'.

fungera: Det är också en obligatorisk parameter. Det är en JavaScript-funktion som svarar på händelsen inträffar.

c programsträngarray

useCapture: Det är en valfri parameter. Det är ett booleskt värde som anger om händelsen exekveras i bubblings- eller infångningsfasen. Dess möjliga värden är Sann och falsk . När den är inställd på sant, körs händelsehanteraren i fångstfasen. När den är inställd på falsk kör hanteraren i bubblingsfasen. Dess standardvärde är falsk .

Låt oss se några av illustrationerna av att använda addEventListener()-metoden.

Exempel

Det är ett enkelt exempel på att använda metoden addEventListener() . Vi måste klicka på det givna HTML-knapp för att se effekten.

Exempel på addEventListener()-metoden.

Klicka på följande knapp för att se effekten.

vad är måtten på min datorskärm
Klicka på mig document.getElementById('btn').addEventListener('klick', kul); function fun() { document.getElementById('para').innerHTML = 'Hej världen' + '
' + 'Välkommen till javaTpoint.com'; }Testa det nu

Produktion

JavaScript addEventListener()

Efter att ha klickat på den givna HTML-knappen kommer utdata att vara -

JavaScript addEventListener()

Nu, i nästa exempel kommer vi att se hur man lägger till många händelser till samma element utan att skriva över befintliga händelser.

Exempel

I det här exemplet lägger vi till flera händelser till samma element.

Detta är ett exempel på att lägga till flera händelser till samma element.

Klicka på följande knapp för att se effekten.

Click me function fun() { alert('Välkommen till javaTpoint.com'); } function fun1() { document.getElementById('para').innerHTML = 'Detta är den andra funktionen'; } function fun2() { document.getElementById('para1').innerHTML = 'Detta är den tredje funktionen'; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('klick', kul); mybtn.addEventListener('klick', kul1); mybtn.addEventListener('klick', kul2);Testa det nu

Produktion

JavaScript addEventListener()

Nu, när vi klickar på knappen, kommer en varning att visas. Efter att ha klickat på den givna HTML-knappen kommer utdata att vara -

JavaScript addEventListener()

När vi lämnar varningen är utsignalen -

tjurar vs oxe
JavaScript addEventListener()

Exempel

I det här exemplet lägger vi till flera händelser av en annan typ till samma element.

Detta är ett exempel på att lägga till flera händelser av olika typ till samma element.

Klicka på följande knapp för att 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 = 'Detta är den andra funktionen'; } funktion fun2() { btn.style.width = ''; btn.style.height = ''; btn.style.background = ''; btn.style.color = ''; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('mouseover', kul); mybtn.addEventListener('klick', kul1); mybtn.addEventListener('mouseout', fun2);Testa det nu

Produktion

JavaScript addEventListener()

När vi flyttar markören över knappen blir utdata -

JavaScript addEventListener()

Efter att ha klickat på knappen och lämnat markören, kommer utgången att vara -

JavaScript addEventListener()

Event Bubbling eller Event Capturing

Nu förstår vi användningen av den tredje parametern i JavaScripts addEventListener(), dvs. använd Capture.

I HTML DOM, Bubblande och Fångande är de två sätten att sprida händelser. Vi kan förstå dessa sätt genom att ta ett exempel.

binärt sökträd]

Anta att vi har ett div-element och ett styckeelement inuti det, och vi tillämpar 'klick' händelse till dem båda med hjälp av addEventListener() metod. Nu är frågan om att klicka på paragrafelementet, vilket elements klickhändelse hanteras först.

Så, in bubblande, händelsen av styckeelement hanteras först, och sedan hanteras div-elementets händelse. Det betyder att i bubbling hanteras det inre elementets händelse först, och sedan kommer det yttersta elementets händelse att hanteras.

I Fångande händelsen av div-elementet hanteras först, och sedan hanteras styckeelementets händelse. Det betyder att vid fånga hanteras det yttre elementets händelse först, och sedan kommer det innersta elementets händelse att hanteras.

funktioner i java 
 addEventListener(event, function, useCapture);

Vi kan specificera spridningen med hjälp av använd Capture parameter. När det är inställt på falskt (vilket är dess standardvärde) använder händelsen bubblande spridning, och när den är inställd på sant finns det fångstförökning.

Vi kan förstå bubblande och fångande med hjälp av en illustration.

Exempel

I det här exemplet finns det två div-element. Vi kan se den bubblande effekten på det första div-elementet och fångsteffekten på det andra div-elementet.

När vi dubbelklickar på span-elementet i det första div-elementet, hanteras span-elementets händelse först än div-elementet. Det kallas bubblande .

Men när vi dubbelklickar på span-elementet i det andra div-elementet, hanteras div-elementets händelse först än span-elementet. Det kallas fångande .

 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);
Testa det nu

Produktion

JavaScript addEventListener()

Vi måste dubbelklicka på de specifika elementen för att se effekten.