Beispiel
Bringen Sie das Dokument ein Click-Ereignis. Wenn der Benutzer klickt irgendwo im Dokument, Ausgabe "Hello World" in einem <p> Elemente mit id = „Demo“:
document.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
}); Versuch es selber " Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Das document. addEventListener() document. addEventListener() Methode legt auf das Dokument eine Ereignisbehandlungsroutine.
Tipp: Verwenden Sie das Dokument. removeEventListener() Methode einen Ereignishandler zu entfernen , die mit der angehängten wurden addEventListener() Methode.
Tipp: Verwenden Sie das Element. addEventListener() Methode einen Ereignishandler ein angegebenes Element zu befestigen.
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Methode vollständig unterstützt.
| Methode | |||||
|---|---|---|---|---|---|
| addEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
Hinweis: Die addEventListener() Methode wird nicht unterstützt in Internet Explorer 8 und früheren Versionen und Opera 6.0 und früheren Versionen. Doch für diese speziellen Browser - Versionen, können Sie die Verwendung attachEvent() Methode , um Event - Handler anhängen (see "More Examples" below for a cross-browser solution) - (see "More Examples" below for a cross-browser solution) .
Syntax
document.addEventListener( event , function ,
useCapture )
Parameterwerte
| Parameter | Beschreibung |
|---|---|
| event | Erforderlich. Ein String, der den Namen des Ereignisses angibt. Hinweis: Die nicht verwenden "on" Präfix. Verwenden Sie zum Beispiel "click" statt "onclick" . Eine Liste aller Ereignisse HTML - DOM, einen Blick auf unsere komplette HTML - DOM Event - Objekt Referenz . |
| function | Erforderlich. Gibt die Funktion ausgeführt wird, wenn das Ereignis eintritt. Wenn das Ereignis eintritt, wird ein Ereignis-Objekt zu der Funktion als ersten Parameter übergeben. Die Art des Ereignisobjekts ist abhängig von dem angegebenen Ereignisse. Zum Beispiel kann das "click" gehört Ereignis an das Mouseevent - Objekt. |
| useCapture | Optional. Ein boolescher Wert, der angibt, ob das Ereignis sollte in der Erfassung oder in der Bubbling-Phase durchgeführt werden. Mögliche Werte:
|
Technische Details
| DOM Version: | DOM Level 2 Veranstaltungen |
|---|---|
| Rückgabewert: | Kein Rückgabewert |
| Änderungsprotokoll: | Der Parameter useCapture wurde optional in Firefox 6 und Opera 11.60 (has always been optional for Chrome, IE and Safari) |
Mehr Beispiele
Beispiel
Sie können auch auf eine externe siehe "named" Funktion:
document.addEventListener("click",
myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Versuch es selber " Beispiel
Sie können viele Ereignisse in das Dokument einfügen, ohne bestehende Ereignisse zu überschreiben.
Dieses Beispiel zeigt, wie man das Dokument zwei Klick-Ereignisse hinzuzufügen:
document.addEventListener("click",
myFunction);
document.addEventListener("click", someOtherFunction); Versuch es selber " Beispiel
Sie können verschiedene Ereignisse in das Dokument einfügen.
Dieses Beispiel zeigt, wie viele Ereignisse in das Dokument hinzuzufügen:
document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction); Versuch es selber " Beispiel
Wenn die Parameterwerte vorbei, eine verwenden "anonymous function" , die die angegebene Funktion mit den Parametern aufrufen:
document.addEventListener("click", function() {
myFunction(p1, p2);
}); Versuch es selber " Beispiel
Ändern Sie die Hintergrundfarbe des Dokuments des <body> Element:
document.addEventListener("click", function(){
document.body.style.backgroundColor = "red";
}); Versuch es selber " Beispiel
Unter Verwendung des removeEventListener() Methode einen Ereignishandler zu entfernen , die mit dem angehängten wurde addEventListener() Methode:
// Attach an event handler to the document
document.addEventListener("mousemove",
myFunction);
// Remove the event handler from the document
document.removeEventListener("mousemove", myFunction); Versuch es selber " Beispiel
Für Browser , die das nicht unterstützen addEventListener() -Methode können Sie die Verwendung attachEvent() Methode.
Dieses Beispiel zeigt eine Cross-Browser-Lösung:
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);
} Versuch es selber " Verwandte Seiten
JavaScript Tutorial: HTML DOM Eventlistener
HTML DOM Referenz: Element. addEventListener()