logo

TechCodeview

JavaScript addEventListener()

The addEventListener() metoda este folosită pentru a atașa un handler de evenimente la un anumit element. Nu anulează gestionatorii de evenimente existente. Se spune că evenimentele sunt o parte esențială a JavaScript. O pagină web răspunde în funcție de evenimentul care a avut loc. Evenimentele pot fi generate de utilizator sau generate de API-uri. Un ascultător de evenimente este o procedură JavaScript care așteaptă apariția unui eveniment.

Metoda addEventListener() este o funcție încorporată a JavaScript . Putem adăuga mai mulți handlere de evenimente la un anumit element fără a suprascrie handlerele de evenimente existente.



Sintaxă

 element.addEventListener(event, function, useCapture);

Deși are trei parametri, parametrii eveniment și funcţie sunt utilizate pe scară largă. Al treilea parametru este opțional de definit. Valorile acestei funcții sunt definite după cum urmează.

Valorile parametrilor

eveniment: Este un parametru obligatoriu. Poate fi definit ca un șir care specifică numele evenimentului.

Notă: Nu utilizați niciun prefix precum „pornit” cu valoarea parametrului. De exemplu, utilizați „click” în loc de „onclick”.

funcţie: Este, de asemenea, un parametru obligatoriu. Este un Funcția JavaScript care răspunde la evenimentul care se produce.



cheia candidatului

useCapture: Este un parametru opțional. Este o valoare de tip boolean care specifică dacă evenimentul este executat în faza de bule sau de captare. Valorile sale posibile sunt Adevărat și fals . Când este setat la adevărat, handlerul de evenimente se execută în faza de captare. Când este setat la false, handlerul execută în faza de barbotare. Valoarea sa implicită este fals .

Să vedem câteva dintre ilustrațiile utilizării metodei addEventListener().

Exemplu

Este un exemplu simplu de utilizare a metodei addEventListener(). Trebuie să facem clic pe dat butonul HTML pentru a vedea efectul.



Exemplu al metodei addEventListener().

Faceți clic pe următorul buton pentru a vedea efectul.

Dați clic pe mine document.getElementById('btn').addEventListener('clic', distracție); function fun() { document.getElementById('para').innerHTML = 'Hello World' + '
' + 'Bine ați venit la javaTpoint.com'; }Testează-l acum

Ieșire

JavaScript addEventListener()

După ce faceți clic pe butonul HTML dat, rezultatul va fi -

JavaScript addEventListener()

Acum, în exemplul următor vom vedea cum să adăugați multe evenimente la același element fără a suprascrie evenimentele existente.

Exemplu

În acest exemplu, adăugăm mai multe evenimente la același element.

operator python //

Acesta este un exemplu de adăugare a mai multor evenimente la același element.

Faceți clic pe următorul buton pentru a vedea efectul.

cizmă de primăvară
Click me function fun() { alert('Bine ați venit la javaTpoint.com'); } function fun1() { document.getElementById('para').innerHTML = 'Aceasta este a doua functie'; } function fun2() { document.getElementById('para1').innerHTML = 'Aceasta este a treia functie'; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('clic', distractiv); mybtn.addEventListener('click', fun1); mybtn.addEventListener('click', fun2);Testează-l acum

Ieșire

JavaScript addEventListener()

Acum, când facem clic pe butonul, va fi afișată o alertă. După ce faceți clic pe butonul HTML dat, rezultatul va fi -

JavaScript addEventListener()

Când ieșim din alertă, rezultatul este -

JavaScript addEventListener()

Exemplu

În acest exemplu, adăugăm mai multe evenimente de un tip diferit la același element.

Acesta este un exemplu de adăugare a mai multor evenimente de tip diferit la același element.

Faceți clic pe următorul buton pentru a vedea efectul.

Faceți clic pe funcția fun() { btn.style.width = '50px'; btn.style.height = '50px'; btn.style.background = 'galben'; btn.style.color = 'albastru'; } function fun1() { document.getElementById('para').innerHTML = 'Aceasta este a doua functie'; } function fun2() { btn.style.width = ''; btn.style.height = ''; btn.style.background = ''; btn.style.color = ''; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('mouseover', fun); mybtn.addEventListener('click', fun1); mybtn.addEventListener('mouseout', fun2);Testează-l acum

Ieșire

JavaScript addEventListener()

Când trecem cursorul peste buton, rezultatul va fi -

servicii web java
JavaScript addEventListener()

După ce faceți clic pe butonul și părăsiți cursorul, rezultatul va fi -

JavaScript addEventListener()

Barbotarea evenimentelor sau Capturarea evenimentelor

Acum, înțelegem utilizarea celui de-al treilea parametru al addEventListener() al JavaScript-ului, adică, foloseșteCapture.

În HTML DOM, clocotind și Captură sunt cele două moduri de propagare a evenimentului. Putem înțelege aceste moduri luând un exemplu.

Să presupunem că avem un element div și un element paragraf în interiorul acestuia și aplicăm 'clic' eveniment pentru amândoi folosind addEventListener() metodă. Acum întrebarea este să faceți clic pe elementul paragraf, evenimentul de clic al cărui element este tratat primul.

Deci, în clocotind, evenimentul elementului paragraf este tratat mai întâi, iar apoi evenimentul elementului div este tratat. Înseamnă că în barbotare, evenimentul elementului interior este tratat mai întâi, iar apoi evenimentul elementului exterior va fi tratat.

În Captură evenimentul elementului div este tratat mai întâi, iar apoi evenimentul elementului paragraf este tratat. Înseamnă că, în capturarea elementului exterior, evenimentul este tratat mai întâi, iar apoi evenimentul elementului cel mai interior va fi tratat.

list nodul în java 
 addEventListener(event, function, useCapture);

Putem specifica propagarea folosind foloseșteCapture parametru. Când este setat la fals (care este valoarea sa implicită), atunci evenimentul folosește propagarea cu barbotare, iar când este setat la adevărat, există propagarea de captare.

Putem înțelege clocotind și captarea folosind o ilustrație.

Exemplu

În acest exemplu, există două elemente div. Putem vedea efectul de barbotare pe primul element div și efectul de captare pe al doilea element div.

Când facem dublu clic pe elementul span al primului element div, atunci evenimentul elementului span este tratat mai întâi decât elementul div. Se numeste clocotind .

Dar când facem dublu clic pe elementul span al celui de-al doilea element div, atunci evenimentul elementului div este tratat mai întâi decât elementul span. Se numeste captarea .

 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);
Testează-l acum

Ieșire

JavaScript addEventListener()

Trebuie să facem dublu clic pe elementele specifice pentru a vedea efectul.