addEventListener()-Methode
Beispiel
Das Listening-Ereignis wird ausgelöst, wenn der Benutzer auf die Schaltfläche
klickt
document.getElementById("myBtn").addEventListener("click", displayDate);
Die Methode addEventListener() wird verwendet, um dem angegebenen Element einen Event-Handler hinzuzufügen.
Der von der Methode addEventListener() hinzugefügte Ereignishandler überschreibt nicht den vorhandenen Ereignishandler.
Sie können einem Element mehrere Ereignishandler hinzufügen.
Sie können demselben Element mehrere Ereignishandler desselben Typs hinzufügen, beispielsweise zwei „Klick“-Ereignisse.
Sie können Ereignis-Listener zu jedem DOM-Objekt hinzufügen, nicht nur zu HTML-Elementen. Zum Beispiel: Fensterobjekt.
Die Methode addEventListener() erleichtert die Steuerung von Ereignissen (Bubbling und Capture).
Wenn Sie die Methode addEventListener() verwenden, wird das JavaScript vom HTML-Markup getrennt, wodurch es besser lesbar wird, und Sie können Ereignis-Listener hinzufügen, ohne das HTML-Markup zu steuern.
Sie können die Methode „removeEventListener()“ verwenden, um Ereignis-Listener zu entfernen.
Grammatik
element.addEventListener(event, function, useCapture);
Der erste Parameter ist die Art des Ereignisses (z. B. „Klick“ oder „Mousedown“).
Der zweite Parameter ist die Funktion, die aufgerufen wird, nachdem das Ereignis ausgelöst wurde.
Der dritte Parameter ist ein boolescher Wert, der beschreibt, ob das Ereignis sprudelt oder einfängt. Dieser Parameter ist optional.
Hinweis: Verwenden Sie nicht das Präfix „on“. Verwenden Sie beispielsweise „click“ anstelle von „onclick“.
Ereignishandler zum ursprünglichen Element hinzufügen
Beispiel
„Hallo Welt!“ erscheint, wenn der Benutzer auf das Element klickt:
element.addEventListener("click", function(){ alert("Hello World!"); });
Sie können Funktionsnamen verwenden, um auf externe Funktionen zu verweisen:
Beispiel
„Hallo Welt!“ erscheint, wenn der Benutzer auf das Element klickt:
element.addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
Mehrere Event-Handler zum selben Element hinzufügen
Die Methode addEventListener() ermöglicht das Hinzufügen mehrerer Ereignisse zum selben Element, ohne vorhandene Ereignisse zu überschreiben:
Beispiel
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
Sie können demselben Element verschiedene Arten von Ereignissen hinzufügen:
Beispiel
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);Fügen Sie einen Event-Handler zum Window-Objekt hinzu
Mit der Methode addEventListener() können Sie Ereignis-Listener zu HTML-DOM-Objekten wie HTML-Elementen, HTML-Dokumenten und Fensterobjekten hinzufügen. Oder andere Ausgabenereignisobjekte wie: xmlHttpRequest-Objekt.
Beispiel
Fügen Sie einen Ereignis-Listener hinzu, wenn der Benutzer die Fenstergröße zurücksetzt:
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});Parameter übergeben
Verwenden Sie beim Übergeben von Parameterwerten „anonyme Funktionen“, um Funktionen mit Parametern aufzurufen:
Beispiel
element.addEventListener("click", function(){ myFunction(p1, p2); });Event-Bubbling oder Event-Capturing?
Es gibt zwei Möglichkeiten der Ereignisbereitstellung: Sprudeln und Einfangen.
Die Ereignisübermittlung definiert die Reihenfolge, in der Elementereignisse ausgelöst werden. Wenn Sie ein
-Element in ein
-Element klickt, wird das „Klick“-Ereignis zuerst ausgelöst?
Beim Bubbling wird zuerst das Ereignis des inneren Elements und dann das äußere Element ausgelöst, d. h. das Klickereignis des
-Elements wird zuerst ausgelöst und dann das Klickereignis des
-Element wird ausgelöst.
Die Methode addEventListener() kann den Parameter „useCapture“ angeben, um den Übermittlungstyp festzulegen:
addEventListener(event, function, useCapture);
Der Standardwert ist „false“, was bedeutet, dass eine Blasenzustellung erfolgt. Wenn der Wert „true“ ist, wird das Ereignis mithilfe der Erfassung übermittelt.
Beispiel
document.getElementById("myDiv").addEventListener("click", myFunction, true);
Probieren Sie es aus »
removeEventListener()-Methode
Die Methode „removeEventListener()“ entfernt den von der Methode „addEventListener()“ hinzugefügten Ereignishandler:
Beispiel
element.removeEventListener("mousemove", myFunction);
Browser-Unterstützung
Die Zahlen in der Tabelle stellen die Versionsnummer des ersten Browsers dar, der diese Methode unterstützt.
Hinweis: IE 8 und frühere IE-Versionen, Opera 7.0 und frühere Versionen unterstützen die Methoden addEventListener() und removeEventListener() nicht. Für solche Browserversionen kann der Event-Handler jedoch mit der detachEvent()-Methode entfernt werden:
element.attachEvent(event, function); element.detachEvent(event, function);
Beispiel
Browserübergreifende Problemumgehung:
var x = document.getElementById("myBtn");
if (x.addEventListener) { // 所有主流浏览器，除了 IE 8 及更早版本
x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // IE 8 及更早版本
x.attachEvent("onclick", myFunction);
