JavaScript HTML DOM Ereignisbeobachter

addEventListener() Methode

Beispiel

Fügen Sie einen Ereignislistener hinzu, der ausgelöst wird, wenn der Benutzer auf die Schaltfläche klickt:

document.getElementById("myBtn").addEventListener("click", displayDate);

Versuchen Sie es selbst

addEventListener() Diese Methode weist einem bestimmten Element einen Ereignisbehandler zu.

addEventListener() Diese Methode fügt Ereignisbehandler zu einem Element hinzu, ohne bestehende Ereignisbehandler zu überschreiben.

Sie können mehreren Elementen mehrere Ereignisbehandler hinzufügen.

Sie können mehrere Ereignisbehandler desselben Typs zu einem Element hinzufügen, z.B. zwei "click"-Ereignisse.

Sie können Ereignisbehandler zu jedem DOM-Objekt hinzufügen, nicht nur zu HTML-Elementen, z.B. zum window-Objekt.

addEventListener() Methode machen es einfacher, zu steuern, wie Ereignisse auf Blase reagieren.

Wenn Sie addEventListener() Methoden wird JavaScript von HTML-Markierungen getrennt, was eine bessere Lesbarkeit ermöglicht; selbst wenn die HTML-Markierungen nicht kontrolliert werden, können Ereignislistener hinzugefügt werden.

Durch die Verwendung von removeEventListener() Das Methode löscht Ereignislistener leicht.

Syntax

element.addEventListener(event, function, useCapture);

Der erste Parameter ist der Ereignistyp (z.B. "click" oder "mousedown").

Der zweite Parameter ist die Funktion, die aufgerufen wird, wenn das Ereignis eintritt.

Der dritte Parameter ist ein Boolescher Wert, der angibt, ob Ereignisblase oder Ereignisabfang verwendet werden soll. Dieser Parameter ist optional.

Hinweis:Verwenden Sie keinen Präfix "on" für Ereignisse; verwenden Sie "click" anstelle von "onclick".

Fügen Sie einen Ereignisbehandler zu einem Element hinzu

Beispiel

Zeigen Sie "Hello World!" an, wenn der Benutzer auf ein Element klickt:

element.addEventListener("click", function(){ alert("Hello World!"); });

Versuchen Sie es selbst

Sie können auch externe "benannte" Funktionen referenzieren:

Beispiel

Zeigen Sie "Hello World!" an, wenn der Benutzer auf ein Element klickt:

element.addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}

Versuchen Sie es selbst

Fügen Sie mehrere Ereignisbehandler zu einem Element hinzu

addEventListener() Diese Methode ermöglicht es Ihnen, mehrere Ereignisse auf dasselbe Element hinzuzufügen, ohne bestehende Ereignisse zu überschreiben:

Beispiel

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

Versuchen Sie es selbst

Sie können verschiedene Ereignistypen auf dasselbe Element hinzufügen:

Beispiel

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

Versuchen Sie es selbst

Fügen Sie einen Ereignisbehandler zum Window-Objekt hinzu

addEventListener() Ermöglicht es Ihnen, einen Event-Listener auf jedem HTML DOM-Objekt hinzuzufügen, z.B. HTML-Elemente, HTML-Objekte, das window-Objekt oder andere Objekte, die Ereignisse unterstützen, wie das XMLHttpRequest-Objekt.

Beispiel

Fügen Sie einen Event-Listener hinzu, der ausgelöst wird, wenn der Benutzer das Fenstergröße anpasst:

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

Versuchen Sie es selbst

传递参数

当传递参数值时，请以参数形式使用调用指定函数的“匿名函数”：

Beispiel

element.addEventListener("click", function(){ myFunction(p1, p2); });

Versuchen Sie es selbst

事件冒泡还是事件捕获？

在 HTML DOM 中有两种事件传播的方法：冒泡和捕获。

事件传播是一种定义当事件发生时元素顺序的方法。假如 <div> 元素内有一个 <p>，然后用户点击了这个 <p> 元素，应该首先处理哪个元素的“click”事件？

在冒泡中，最内层的元素的事件会首先被处理，然后是更外层的：首先处理 <p> 元素的点击事件，然后是 <div> 元素的点击事件。

在捕获中，最外层的元素的事件会首先被处理，然后是更内层的：首先处理 <div> 元素的点击事件，然后是 <p> 元素的点击事件。

在 addEventListener() 方法中，您可以通过使用“useCapture”参数来指定传播类型：

addEventListener(event, function, useCapture);

默认值是 false，将使用冒泡传播，如果该值设置为 true，则事件使用捕获传播。

Beispiel

document.getElementById("myP").addEventListener("click", myFunction(), true);
document.getElementById("myDiv").addEventListener("click", myFunction(), true);

Versuchen Sie es selbst

removeEventListener() 方法

removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序：

Beispiel

element.removeEventListener("mousemove", myFunction());

Versuchen Sie es selbst

浏览器支持

表格中的数字规定了完全支持这些方法的首个浏览器版本。

方法
addEventListener() 1.0 9.0 1.0 1.0 7.0
removeEventListener() 1.0 9.0 1.0 1.0 7.0

注释：IE 8、Opera 6.0 及其更早版本不支持 addEventListener() 以及 removeEventListener() 方法。但是，对于这些特殊的浏览器版本，您可以使用 attachEvent() Methode hinzufügen eines Ereignisbehandlers zu einem Element und detachEvent() Methode löschen:

element.attachEvent(event, function);
element.detachEvent(event, function);

Beispiel

Crossbrowser-Lösung:

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // Für Hauptbrowser, außer IE 8 und älteren Versionen
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // Für IE 8 und frühere Versionen
    x.attachEvent("onclick", myFunction);
}

Versuchen Sie es selbst

HTML DOM Event-Objekt-Referenzhandbuch

Für eine Liste aller HTML DOM-Ereignisse besuchen Sie bitte unser vollständiges HTML DOM Event-Objekt-Referenzhandbuch.