logo

TechCodeview

JavaScript addEventListener()

The addEventListener() metode tiek izmantota, lai pievienotu notikumu apstrādātāju noteiktam elementam. Tas neierobežo esošos notikumu apstrādātājus. Tiek uzskatīts, ka notikumi ir būtiska JavaScript sastāvdaļa. Tīmekļa lapa reaģē atbilstoši notikušajam notikumam. Notikumus var ģenerēt lietotājs vai ģenerēt API. Notikumu uztvērējs ir JavaScript procedūra, kas gaida notikuma iestāšanos.

AddEventListener() metode ir iebūvēta funkcija JavaScript . Mēs varam pievienot vairākus notikumu apdarinātājus konkrētam elementam, nepārrakstot esošos notikumu apdarinātājus.

Sintakse

 element.addEventListener(event, function, useCapture);

Lai gan tam ir trīs parametri, parametri notikumu un funkciju tiek plaši izmantoti. Trešais parametrs nav definējams. Šīs funkcijas vērtības ir definētas šādi.

Parametru vērtības

pasākums: Tas ir obligāts parametrs. To var definēt kā virkni, kas norāda notikuma nosaukumu.

Piezīme. Parametra vērtībai neizmantojiet prefiksu, piemēram, “ieslēgts”. Piemēram, izmantojiet 'klikšķi', nevis 'onclick'.

funkcija: Tas ir arī obligāts parametrs. Tas ir JavaScript funkcija kas reaģē uz notikumu notiek.

python programmu piemēri

useCapture: Tas ir izvēles parametrs. Tā ir Būla tipa vērtība, kas norāda, vai notikums tiek izpildīts burbuļošanas vai tveršanas fāzē. Tās iespējamās vērtības ir taisnība un viltus . Ja tas ir iestatīts uz True, notikumu apstrādātājs izpilda tveršanas fāzē. Ja tas ir iestatīts uz false, apdarinātājs izpilda burbuļošanas fāzē. Tā noklusējuma vērtība ir viltus .

Apskatīsim dažas metodes addEventListener() izmantošanas ilustrācijas.

Piemērs

Tas ir vienkāršs metodes addEventListener() izmantošanas piemērs. Mums ir jānoklikšķina uz dotā HTML poga lai redzētu efektu.

AddEventListener() metodes piemērs.

Noklikšķiniet uz šīs pogas, lai redzētu efektu.

Noklikšķiniet uz mani document.getElementById('btn').addEventListener('click', fun); function fun() { document.getElementById('para').innerHTML = 'Sveika pasaule' + '
' + 'Laipni lūdzam vietnē javaTpoint.com'; }Izmēģiniet to tagad

Izvade

JavaScript addEventListener()

Pēc noklikšķināšanas uz dotās HTML pogas, izvade būs -

JavaScript addEventListener()

Tagad nākamajā piemērā mēs redzēsim, kā vienam un tam pašam elementam pievienot daudzus notikumus, nepārrakstot esošos notikumus.

kandidāta atslēga

Piemērs

Šajā piemērā vienam un tam pašam elementam tiek pievienoti vairāki notikumi.

Šis ir piemērs vairāku notikumu pievienošanai vienam un tam pašam elementam.

java localdatetime

Noklikšķiniet uz šīs pogas, lai redzētu efektu.

Noklikšķiniet uz mani function fun() { alert('Laipni lūdzam vietnē javaTpoint.com'); } function fun1() { document.getElementById('para').innerHTML = 'Šī ir otrā funkcija'; } function fun2() { document.getElementById('para1').innerHTML = 'Šī ir trešā funkcija'; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('klikšķis', jautri); mybtn.addEventListener('klikšķis', jautri1); mybtn.addEventListener('klikšķis', fun2);Izmēģiniet to tagad

Izvade

JavaScript addEventListener()

Tagad, noklikšķinot uz pogas, tiks parādīts brīdinājums. Pēc noklikšķināšanas uz dotās HTML pogas, izvade būs -

JavaScript addEventListener()

Kad mēs izejam no brīdinājuma, izvade ir -

JavaScript addEventListener()

Piemērs

Šajā piemērā vienam un tam pašam elementam tiek pievienoti vairāki dažāda veida notikumi.

Šis ir piemērs vairāku dažāda veida notikumu pievienošanai vienam elementam.

Noklikšķiniet uz šīs pogas, lai redzētu efektu.

Noklikšķiniet uz manis funkcija fun() { btn.style.width = '50px'; btn.style.height = '50 pikseļi'; btn.style.background = 'dzeltens'; btn.style.color = 'zils'; } function fun1() { document.getElementById('para').innerHTML = 'Šī ir otrā funkcija'; } function fun2() { btn.style.width = ''; btn.style.height = ''; btn.style.background = ''; btn.style.color = ''; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('virs kursora', jautri); mybtn.addEventListener('klikšķis', jautri1); mybtn.addEventListener('mouseout', fun2);Izmēģiniet to tagad

Izvade

virknes konvertēšana uz int java
JavaScript addEventListener()

Pārvietojot kursoru virs pogas, rezultāts būs -

JavaScript addEventListener()

Noklikšķinot uz pogas un atstājot kursoru, izvade būs -

JavaScript addEventListener()

Notikumu burbuļošana vai notikumu tveršana

Tagad mēs saprotam JavaScript addEventListener() trešā parametra izmantošanu, t.i., useCapture.

HTML DOM, Burbuļošana un Tveršana ir divi notikumu izplatīšanas veidi. Mēs varam saprast šos veidus, ņemot piemēru.

Pieņemsim, ka tajā ir div elements un rindkopas elements, un mēs izmantojam 'klikšķis' notikumu abiem, izmantojot addEventListener() metodi. Tagad jautājums ir par noklikšķināšanu uz rindkopas elementa, kura elementa klikšķa notikums tiek apstrādāts pirmais.

Tātad, iekšā burbuļo, vispirms tiek apstrādāts rindkopas elementa notikums un pēc tam elementa div notikums. Tas nozīmē, ka burbuļošanas gadījumā vispirms tiek apstrādāts iekšējā elementa notikums, un pēc tam tiks apstrādāts visattālākā elementa notikums.

In Tveršana vispirms tiek apstrādāts elementa div notikums, un pēc tam tiek apstrādāts rindkopas elementa notikums. Tas nozīmē, ka tveršanā vispirms tiek apstrādāts ārējā elementa notikums, un pēc tam tiks apstrādāts visdziļākā elementa notikums.

mainiet direktorija nosaukumu linux 
 addEventListener(event, function, useCapture);

Mēs varam norādīt izplatību, izmantojot useCapture parametrs. Ja tas ir iestatīts uz false (kas ir tā noklusējuma vērtība), notikums izmanto burbuļojošu izplatīšanos, un, ja tas ir iestatīts uz True, notiek tveršanas izplatīšanās.

Mēs varam saprast burbuļojošs un notveršanā izmantojot ilustrāciju.

Piemērs

Šajā piemērā ir divi div elementi. Mēs varam redzēt burbuļošanas efektu uz pirmo div elementu un uztveršanas efektu uz otro div elementu.

Veicot dubultklikšķi uz pirmā div elementa span elementa, tad span elementa notikums tiek apstrādāts vispirms nekā div elements. Tas tiek saukts burbuļojošs .

Bet, ja mēs veicam dubultklikšķi uz otrā div elementa span elementa, tad div elementa notikums tiek apstrādāts vispirms nekā span elements. Tas tiek saukts notveršanā .

 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);
Izmēģiniet to tagad

Izvade

JavaScript addEventListener()

Mums ir jāveic dubultklikšķis uz konkrētajiem elementiem, lai redzētu efektu.