Exemplu
Atașați un eveniment clic pentru un <button> Element. Atunci când utilizatorul face clic pe butonul, de ieșire "Hello World" , într - un <p> elementul cu id = „demo“:
document.getElementById("myBtn").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
addEventListener() metoda atașează o tratare a evenimentului la elementul specificat.
Sfat: utilizați removeEventListener() metoda pentru a elimina un handler eveniment care a fost atașat cu addEventListener() metoda.
Sfat: Utilizați documentul. addEventListener() metoda pentru a atașa o tratare a evenimentului la document.
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ă
element .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ția.
Acest exemplu demonstrează modul în care să execute o funcție atunci când un utilizator face clic pe un <button> Element:
document.getElementById("myBtn").addEventListener("click",
myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Încearcă - l singur » Exemplu
Puteți adăuga mai multe evenimente la același element, fără a suprascrie evenimente existente.
Acest exemplu demonstrează modul în care să adăugați două evenimente faceți clic pe același <button> elementului:
document.getElementById("myBtn").addEventListener("click",
myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction); Încearcă - l singur » Exemplu
Puteți adăuga evenimente de diferite tipuri de la același element.
Acest exemplu demonstrează modul de a adăuga mai multe evenimente pe tot asa <button> elementului:
document.getElementById("myBtn").addEventListener("mouseover", myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction);
document.getElementById("myBtn").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.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
}); Încearcă - l singur » Exemplu
Schimba culoarea de fundal a unui <button> Element:
document.getElementById("myBtn").addEventListener("click", function(){
this.style.backgroundColor = "red";
}); Încearcă - l singur » Exemplu
Folosind parametrul useCapture opțional pentru a demonstra diferența dintre barbotaj și capturarea:
document.getElementById("myDiv").addEventListener("click", myFunction,
true); Î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 <div>
document.getElementById("myDIV").addEventListener("mousemove",
myFunction);
// Remove the event handler from <div>
document.getElementById("myDIV").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:
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 » Pagini similare
JavaScript Tutorial: HTML DOM EventListener
HTML DOM Reference: Document. addEventListener()