addEventListener() metoda
Exemplu
Adăugați un ascultător eveniment care declanșează atunci când un utilizator face clic pe un buton:
document.getElementById("myBtn").addEventListener("click", displayDate); Încearcă - l singur » addEventListener() metoda atașează o tratare a evenimentului la elementul specificat.
addEventListener() metoda atașează o tratare a evenimentului la un element fără suprascrierea manipulare eveniment existente.
Puteți adăuga mai multe Stivuitoare eveniment la un singur element.
Puteți adăuga mai multe Stivuitoare eveniment de același tip la un singur element, și anume două "click" evenimente.
Puteți adăuga ascultătorii eveniment la orice obiect DOM nu numai elemente HTML. adică obiectul ferestrei.
addEventListener() metoda face mai ușor pentru a controla modul în care reacționează la evenimentul barbotare.
Când se utilizează addEventListener() metoda, JavaScript este separat de elementele de limbaj HTML, pentru o mai bună lizibilitate și vă permite să adăugați ascultătorii eveniment , chiar și atunci când nu controla elementele de limbaj HTML.
Puteți elimina cu ușurință un eveniment ascultător folosind removeEventListener() metoda.
Sintaxă
element .addEventListener( event, function, useCapture );Primul parametru este tipul de eveniment (like "click" or "mousedown" ) pe (like "click" or "mousedown" ) .
Al doilea parametru este funcția vrem să numim atunci când are loc evenimentul.
Al treilea parametru este o valoare boolean care specifică dacă se utilizează barbotare eveniment sau capturarea eveniment. Acest parametru este opțional.
Rețineți că nu folosiți "on" prefix pentru eveniment; utilizați "click" în loc de "onclick" .
Adăugați un Handler eveniment la un element
Exemplu
Alarma "Hello World!" atunci când utilizatorul face clic pe un element:
element .addEventListener("click", function(){ alert("Hello World!"); }); Încearcă - l singur » Puteți consulta , de asemenea la un extern "named" funcție:
Exemplu
Alarma "Hello World!" atunci când utilizatorul face clic pe un element:
element .addEventListener("click",
myFunction);
function myFunction() {
alert ("Hello World!");
} Încearcă - l singur » Adăugați Multe Manipulatorii eveniment la același element
addEventListener() metoda va permite să adăugați mai multe evenimente la același element, fără a suprascrie evenimente existente:
Exemplu
element .addEventListener("click", myFunction);
element .addEventListener("click", mySecondFunction);
Încearcă - l singur » Puteți adăuga evenimente de diferite tipuri de la același element:
Exemplu
element .addEventListener("mouseover", myFunction);
element .addEventListener("click", mySecondFunction);
element .addEventListener("mouseout", myThirdFunction); Încearcă - l singur » Adăugați un eveniment Handler la obiect fereastra
addEventListener() metoda va permite să adăugați ascultătorii eveniment pe orice obiect DOM HTML , cum ar fi elemente HTML, documentul HTML, obiectul ferestrei sau alte obiecte care suportă evenimente, cum ar fi xmlHttpRequest obiect.
Exemplu
Adăugați un ascultător eveniment care declanșează atunci când un utilizator redimensionează fereastra:
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext ;
});
Încearcă - l singur » Pase Parametri
Atunci când trece valorile parametrilor, utilizați o "anonymous function" , care solicită funcția specificată cu parametrii:
Exemplu
element .addEventListener("click", function(){ myFunction(p1, p2); });
Încearcă - l singur » Efervescență eveniment sau Capturarea eveniment?
Există două modalități de propagare a evenimentului în HTML DOM, barbotare și a capturii.
propagarea evenimentelor este o modalitate de a defini ordinea elementului atunci când are loc un eveniment. Dacă aveți un <p> elementul în interiorul unui <div> element și utilizatorul face clic pe <p> elementul, care a elementului "click" eveniment ar trebui să fie manipulate mai întâi?
In barbotare caz cel mai elementul interior este manipulat mai întâi și apoi exterior: <p> evenimentul click elementului este manipulat mai întâi, apoi <div> eveniment click elementului.
În capturarea caz, elementul cel mai exterior este manipulat mai întâi și apoi interior: a <div> eveniment click elementului va fi manipulat mai întâi, apoi <p> evenimentul clic elementului.
Cu addEventListener() metoda pe care o puteți specifica tipul de propagare prin utilizarea "useCapture" parametru:
addEventListener( event , function , useCapture );Valoarea implicită este falsă, care se va folosi propagarea barbotare, atunci când valoarea este setată la true, evenimentul utilizează propagarea de captare.
Exemplu
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
Încearcă - l singur » removeEventListener() metoda
removeEventListener() metoda de manipulare eveniment elimină care au fost atașate cu addEventListener() metoda:
Suport pentru browser-
Numerele din tabel specifică prima versiune de browser care acceptă pe deplin aceste metode.
| Metodă | |||||
|---|---|---|---|---|---|
| addEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
| removeEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
Notă: addEventListener() și removeEventListener() metode nu sunt acceptate în IE 8 și versiunile anterioare și Opera 6.0 și versiunile anterioare. Cu toate acestea, pentru aceste versiuni specifice de browser, puteți utiliza attachEvent() metoda de a atașa un manipulare eveniment la elementul, iar detachEvent() metoda pentru a elimina:
element. attachEvent (event, function);
element. detachEvent (event,
function); Exemplu
soluție cross-browser:
var x = document.getElementById("myBtn");
if (x.addEventListener) {
// For all major browsers, except IE 8 and earlier
x.addEventListener("click", myFunction);
} else if (x.attachEvent) {
// For IE 8 and earlier versions
x.attachEvent("onclick", myFunction);
}
Încearcă - l singur » HTML DOM Eveniment obiect de referință
Pentru o listă a tuturor evenimentelor HTML DOM, uita - te la nostru complet HTML DOM Eveniment obiect de referință .