Exemplu
Atașați un eveniment clic pe documentul. Atunci când utilizatorul face clic oriunde în document, de ieșire "Hello World" , într - un <p> elementul cu id = „demo“:
document.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
}); Încearcă - l singur » Mai multe "Try it Yourself" - "Try it Yourself" exemplele de mai jos.
Definiție și utilizare
document. addEventListener() document. addEventListener() metoda atașează o tratare a evenimentului la document.
Sfat: Utilizați documentul. removeEventListener() metoda pentru a elimina o tratare a evenimentului care a fost atașat cu addEventListener() metoda.
Sfat: utilizați elementul. addEventListener() metoda pentru a atașa o tratare a evenimentului la un element specificat.
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin metoda.
| Metodă | |||||
|---|---|---|---|---|---|
| addEventListener() | 1.0 | 9 | 1.0 | 1.0 | 7 |
Notă: addEventListener() , metoda nu este acceptată în Internet Explorer 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 pentru a atașa manipulare eveniment (see "More Examples" below for a cross-browser solution) a se (see "More Examples" below for a cross-browser solution) de (see "More Examples" below for a cross-browser solution) , (see "More Examples" below for a cross-browser solution) .
Sintaxă
document.addEventListener( event , function ,
useCapture )
Valorile parametrilor
| Parametru | Descriere |
|---|---|
| event | Necesar. Un șir care specifică numele evenimentului. Notă: Nu folosiți "on" prefix. De exemplu, utilizați "click" în loc de "onclick" . Pentru o listă a tuturor evenimentelor HTML DOM, uita - te la nostru complet HTML DOM Eveniment obiect de referință . |
| function | Necesar. Specifică funcția de a rula atunci când are loc evenimentul. Când are loc evenimentul, un obiect eveniment este trecut la funcția ca primul parametru. Tipul obiectului evenimentului depinde de evenimentul specificat. De exemplu, "click" pe "click" eveniment face parte din obiectul MouseEvent. |
| useCapture | Opțional. O valoare boolean care specifică dacă evenimentul ar trebui să fie executat în capturarea sau în faza de barbotare. Valori posibile:
|
Detalii tehnice
| DOM Versiune: | DOM Level 2 Evenimente |
|---|---|
| Întoarcere Valoare: | Nici o valoare returnată |
| Changelog: | Parametrul useCapture a devenit opțional în Firefox 6 și Opera 11.60 (has always been optional for Chrome, IE and Safari) |
Mai multe exemple
Exemplu
Puteți consulta , de asemenea la un extern "named" funcție:
document.addEventListener("click",
myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Încearcă - l singur » Exemplu
Puteți adăuga mai multe evenimente la document, fără a suprascrie evenimente existente.
Acest exemplu demonstrează modul în care să adăugați două evenimente de clic la documentul:
document.addEventListener("click",
myFunction);
document.addEventListener("click", someOtherFunction); Încearcă - l singur » Exemplu
Puteți adăuga evenimente de diferite tipuri de la document.
Acest exemplu demonstrează modul de a adăuga mai multe evenimente la documentul:
document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction); Încearcă - l singur » Exemplu
Atunci când trece valorile parametrilor, utilizați o "anonymous function" , care solicită funcția specificată cu parametrii:
document.addEventListener("click", function() {
myFunction(p1, p2);
}); Încearcă - l singur » Exemplu
Schimba culoarea de fundal a documentului <body> Element:
document.addEventListener("click", function(){
document.body.style.backgroundColor = "red";
}); Încearcă - l singur » Exemplu
Folosind removeEventListener() metoda pentru a elimina o tratare a evenimentului care a fost atașat cu addEventListener() metoda:
// Attach an event handler to the document
document.addEventListener("mousemove",
myFunction);
// Remove the event handler from the document
document.removeEventListener("mousemove", myFunction); Încearcă - l singur » Exemplu
Pentru browserele care nu acceptă addEventListener() metoda, puteți utiliza attachEvent() metoda.
Acest exemplu demonstrează o soluție cross-browser:
if (document.addEventListener) { // For all major browsers, except IE 8 and earlier
document.addEventListener("click", myFunction);
} else if (document.attachEvent) { // For IE 8 and earlier versions
document.attachEvent("onclick", myFunction);
} Încearcă - l singur » Pagini similare
JavaScript Tutorial: HTML DOM EventListener
HTML DOM Reference: Element. addEventListener()