Beispiel
Bringen Sie ein Klick - Ereignis auf ein <button> Element. Wenn der Benutzer klickt auf die Schaltfläche, Ausgang "Hello World" in einem <p> Element mit id = „Demo“:
document.getElementById("myBtn").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
Die addEventListener() Methode wird an der spezifizierten Element eine Ereignisbehandlungsroutine.
Tipp: Verwenden Sie die removeEventListener() Methode einen Ereignishandler zu entfernen , die mit der angehängten wurden addEventListener() Methode.
Tipp: Verwenden Sie das Dokument. addEventListener() Methode eine Ereignisbehandlungsroutine auf das Dokument 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
element .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 verweisen "named" Funktion.
Dieses Beispiel zeigt , wie eine Funktion auszuführen , wenn ein Benutzer klickt auf ein <button> Element:
document.getElementById("myBtn").addEventListener("click",
myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Versuch es selber " Beispiel
Sie können viele Ereignisse in das gleiche Element hinzuzufügen, ohne vorhandene Ereignisse zu überschreiben.
Dieses Beispiel zeigt , wie auf dem gleichen zwei Klick - Ereignisse hinzuzufügen <button> Element:
document.getElementById("myBtn").addEventListener("click",
myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction); Versuch es selber " Beispiel
Sie können verschiedene Ereignisse auf das gleiche Element hinzuzufügen.
Dieses Beispiel zeigt , wie auf dem gleichen viele Ereignisse hinzuzufügen <button> Element:
document.getElementById("myBtn").addEventListener("mouseover", myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction);
document.getElementById("myBtn").addEventListener("mouseout", someOtherFunction); Versuch es selber " Beispiel
Wenn die Parameterwerte vorbei, eine verwenden "anonymous function" , die die angegebene Funktion mit den Parametern aufrufen:
document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
}); Versuch es selber " Beispiel
Ändern Sie die Hintergrundfarbe eines <button> Element:
document.getElementById("myBtn").addEventListener("click", function(){
this.style.backgroundColor = "red";
}); Versuch es selber " Beispiel
Mit dem optionalen Parameter useCapture den Unterschied zwischen sprudelndem und Capturing zu demonstrieren:
document.getElementById("myDiv").addEventListener("click", myFunction,
true); 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 <div>
document.getElementById("myDIV").addEventListener("mousemove",
myFunction);
// Remove the event handler from <div>
document.getElementById("myDIV").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:
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);
} Versuch es selber " Verwandte Seiten
JavaScript Tutorial: HTML DOM Eventlistener
HTML DOM Referenz: Dokument. addEventListener()