logo

TechCodeview

JavaScript addEventListener()

The addEventListener() se uporablja za pripenjanje obdelovalca dogodka na določen element. Ne preglasi obstoječih obdelovalcev dogodkov. Dogodki naj bi bili bistveni del JavaScripta. Spletna stran se odzove glede na dogodek, ki se je zgodil. Dogodke lahko ustvarijo uporabniki ali API-ji. Poslušalec dogodkov je postopek JavaScripta, ki čaka na pojav dogodka.

Metoda addEventListener() je vgrajena funkcija JavaScript . Določenemu elementu lahko dodamo več obdelovalcev dogodkov, ne da bi prepisali obstoječe obravnave dogodkov.

Sintaksa

 element.addEventListener(event, function, useCapture);

Čeprav ima tri parametre, parametre dogodek in funkcijo se pogosto uporabljajo. Tretji parameter ni obvezen za določitev. Vrednosti te funkcije so definirane na naslednji način.

Vrednosti parametrov

dogodek: Je obvezen parameter. Definiramo ga lahko kot niz, ki določa ime dogodka.

Opomba: z vrednostjo parametra ne uporabljajte nobene predpone, kot je 'on'. Uporabite na primer 'click' namesto 'onclick'.

funkcija: Je tudi obvezen parameter. Je funkcija JavaScript ki se odziva na dogodek.

kaj je 10 od 60

useCapture: Je neobvezen parameter. To je logična vrednost tipa, ki določa, ali se dogodek izvede v fazi brbotanja ali zajemanja. Njegove možne vrednosti so prav in lažno . Ko je nastavljeno na true, se upravljavec dogodkov izvede v fazi zajemanja. Ko je nastavljen na false, se upravljalnik izvaja v fazi brbotanja. Njegova privzeta vrednost je lažno .

Oglejmo si nekaj ilustracij uporabe metode addEventListener().

Primer

To je preprost primer uporabe metode addEventListener(). Klikniti moramo dano Gumb HTML da vidim učinek.

Primer metode addEventListener().

Za ogled učinka kliknite naslednji gumb.

dfs proti bfs
Kliknite me document.getElementById('btn').addEventListener('klik', zabavno); funkcija fun() {document.getElementById('para').innerHTML = 'Hello World' + '
' + 'Dobrodošli na javaTpoint.com'; }Preizkusite zdaj

Izhod

JavaScript addEventListener()

Po kliku danega gumba HTML bo rezultat -

JavaScript addEventListener()

Zdaj bomo v naslednjem primeru videli, kako istemu elementu dodati veliko dogodkov, ne da bi prepisali obstoječe dogodke.

Primer

V tem primeru istemu elementu dodajamo več dogodkov.

To je primer dodajanja več dogodkov istemu elementu.

Za ogled učinka kliknite naslednji gumb.

Click me function fun() { alert('Dobrodošli na javaTpoint.com'); } function fun1() {document.getElementById('para').innerHTML = 'To je druga funkcija'; } function fun2() {document.getElementById('para1').innerHTML = 'To je tretja funkcija'; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('klik', zabavno); mybtn.addEventListener('klik', zabava1); mybtn.addEventListener('klik', zabava2);Preizkusite zdaj

Izhod

JavaScript addEventListener()

Zdaj, ko kliknemo gumb, se prikaže opozorilo. Po kliku danega gumba HTML bo rezultat -

JavaScript addEventListener()

Ko zapustimo opozorilo, je rezultat -

razlika med dvema nizoma python
JavaScript addEventListener()

Primer

V tem primeru istemu elementu dodajamo več dogodkov različne vrste.

To je primer dodajanja več dogodkov različnih vrst istemu elementu.

Za ogled učinka kliknite naslednji gumb.

Click me function fun() { btn.style.width = '50px'; btn.style.height = '50px'; btn.style.background = 'rumena'; btn.style.color = 'modra'; } function fun1() {document.getElementById('para').innerHTML = 'To je druga funkcija'; } funkcija fun2() { btn.style.width = ''; btn.style.height = ''; btn.style.background = ''; btn.style.color = ''; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('mouseover', zabavno); mybtn.addEventListener('klik', zabava1); mybtn.addEventListener('mouseout', fun2);Preizkusite zdaj

Izhod

JavaScript addEventListener()

Ko premaknemo kazalec nad gumb, bo rezultat -

JavaScript addEventListener()

Ko kliknete gumb in zapustite kazalec, bo rezultat -

JavaScript addEventListener()

Bubbling ali zajemanje dogodkov

Zdaj razumemo uporabo tretjega parametra addEventListener() JavaScripta, tj. useCapture.

V HTML DOM, Brbotanje in Zajemanje sta dva načina širjenja dogodkov. Te načine lahko razumemo s primerom.

java, kako pretvoriti niz v int

Recimo, da imamo element div in element odstavka znotraj njega in uporabljamo 'klik' dogodek za oba z uporabo addEventListener() metoda. Zdaj je vprašanje klika elementa odstavka, kateri dogodek klika elementa je obravnavan prvi.

Torej, v brbotanje, najprej se obravnava dogodek elementa odstavka, nato pa dogodek elementa div. To pomeni, da se pri brbotanju najprej obravnava dogodek notranjega elementa, nato pa se obravnava dogodek najbolj oddaljenega elementa.

notri Zajemanje najprej se obravnava dogodek elementa div, nato pa dogodek elementa odstavka. To pomeni, da se pri zajemanju najprej obravnava dogodek zunanjega elementa, nato pa se obravnava dogodek najbolj notranjega elementa.

kako odpreti datoteko v Javi 
 addEventListener(event, function, useCapture);

Širjenje lahko določimo z uporabo useCapture parameter. Ko je nastavljen na false (kar je njegova privzeta vrednost), potem dogodek uporablja brbotajoče širjenje, in ko je nastavljen na true, pride do širjenja zajemanja.

Lahko razumemo, brbotanje in zajemanje z uporabo ilustracije.

Primer

V tem primeru sta dva elementa div. Vidimo lahko učinek mehurčkov na prvem elementu div in učinek zajemanja na drugem elementu div.

Ko dvokliknemo element span prvega elementa div, se dogodek elementa span obravnava najprej kot element div. Se imenuje brbotanje .

Ko pa dvokliknemo element span drugega elementa div, se dogodek elementa div obravnava najprej kot element span. Se imenuje zajemanje .

 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);
Preizkusite zdaj

Izhod

JavaScript addEventListener()

Dvoklikniti moramo določene elemente, da vidimo učinek.