HTML-DOM Methode addEventListener ()
Beispiele
Fügen Sie ein Klick-Ereignis in dem Dokument. Wenn der Benutzer irgendwo im Dokument klickt, die id = "Demo" des <p> -Element Ausgang "Hallo Welt":
. Document.getElementById ( "Demo") innerHTML- = "Hallo Welt";
});
Versuchen »
Definition und Verwendung
document.addEventListener () -Methode wird verwendet, um das Dokument einen Ereignishandler hinzuzufügen.
Tipp: Sie können document.removeEventListener () Methode , um die Methode addEventListener () zu entfernen , Event - Handler hinzuzufügen.
Tipp: Verwenden Sie . Element addEventListener () Methode angegebene Element an den Ereignishandler.
Browser-Unterstützung
Die Zahlen in der Tabelle stellen die erste Browser die Methode Versionsnummer zu unterstützen.
| Weg | |||||
|---|---|---|---|---|---|
| addEventListener () | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
Hinweis: Internet Explorer 8 und frühere Versionen von IE nicht addEventListener () -Methode, Opera 7.0 und früheren Versionen nicht unterstützen Opera unterstützen. Allerdings kann diese Art von Browser - Version verwendet werden attachEvent () -Methode einen Event - Handler (Cross-Browser - Kompatibilitätsprobleme sehen "mehr Beispiele" können) hinzuzufügen.
Grammatik
Parameter Wert
| Parameter | Beschreibung |
|---|---|
| Ereignis | Erforderlich. String Name der Ereignisbeschreibung. Hinweis: Die "on" Präfix nicht verwenden. Verwenden Sie zum Beispiel "Klick" anstelle von "Onclick". Tipp: Alle Veranstaltungen HTML - DOM, können Sie unser komplettes sehen HTML - DOM Event - Objekt Referenz . |
| Funktion | Erforderlich. Es beschreibt die Funktionen nach dem Ereignis ausgelöst hat. Wenn das Ereignis ausgelöst wird, passiert das Ereignisobjekt als erstes Argument an die Funktion. Typ Ereignisobjekt ist abhängig von der jeweiligen Veranstaltung. Zum Beispiel, "klicken Sie auf" Ereignis gehört Mouseevent (Mausereignis) Objekt. |
| useCapture | Optional. Ein boolescher Wert, ob das Ereignis die Ausführung in der Erfassung oder Bubbling-Phase angibt. Mögliche Werte:
|
Technische Details
| DOM-Version: | DOM Level 2 Veranstaltungen |
|---|---|
| Rückkehr: | Kein Rückgabewert |
| Aufzeichnungen: | In Firefox 6 und Opera 11.60 in useCapture Parameter ist optional. (In Chrome, IE und Safari ist immer optional gewesen). |
Weitere Beispiele
Beispiele
Sie können auf externe Funktion durch den Funktionsnamen bezeichnet werden:
Funktion myFunction () {
. Document.getElementById ( "Demo") innerHTML- = "Hallo Welt";
}
Versuchen »
Beispiele
Sie können so viele Ereignisse in das Dokument einfügen, das Ereignis Zugabe wird das bestehende Ereignis nicht überschrieben werden.
Dieses Beispiel zeigt, wie ein Click-Ereignis in zwei Dokumenten hinzuzufügen:
document.addEventListener ( "Klick", someOtherFunction);
Versuchen »
Beispiele
Sie können verschiedene Arten von Ereignissen in dem Dokument hinzuzufügen.
Dieses Beispiel zeigt, wie mehrere Ereignisse in einem Dokument hinzuzufügen:
document.addEventListener ( "Klick", someOtherFunction);
document.addEventListener ( "mouseout", someOtherFunction);
Versuchen »
Beispiele
Wenn Sie einen Parameterwert geben, verwenden Sie den Funktionsaufruf mit den Parametern "anonyme Funktion":
myFunction (p1, p2);
});
Versuchen »
Beispiele
Ändern <body> Element des Hintergrundes:
document.body.style.backgroundColor = "red";
});
Versuchen »
Beispiele
Mit dem removeEventListener () -Methode durch addEventListener () -Methode zu entfernen Event-Handler hinzuzufügen:
document.addEventListener ( "mousemove-", myFunction);
// Das Dokument Ereignishandler entfernen
document.removeEventListener ( "mousemove-", myFunction);
Versuchen »
Beispiele
Wenn Ihr Browser nicht addEventListener () -Methode unterstützen können Sie attachEvent () -Methode stattdessen verwenden.
Das folgende Beispiel zeigt die Cross-Browser-Lösung:
document.addEventListener ( "Klick", myFunction);
} Else if (document.attachEvent) {// IE 8 und frühere Versionen von IE
document.attachEvent ( "Onclick", myFunction);
}
Versuchen »
Verwandte Seiten
JavaScript Tutorial: die HTML - DOM Eventlistener A
JavaScript - Referenzhandbuch: Element .addEventListener ()