HTML DOM Document addEventListener() Methode

Definition und Verwendung

addEventListener() Die Methode fügt den Ereignisbehandler dem Dokument hinzu.

Beispiel

Beispiel 1

Dem Dokument einen Click-Ereignis hinzufügen:

document.addEventListener("click", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

亲自试一试

更简单的语法：

document.addEventListener("click", function(){
  document.getElementById("demo").innerHTML = "Hello World";
});

亲自试一试

例子 2

您可以向文档添加多个事件侦听器：

document.addEventListener("click", myFunction1);
document.addEventListener("click", myFunction2);

亲自试一试

例子 3

您可以添加不同类型的事件：

document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction);

亲自试一试

例子 4

传递参数时，使用“匿名函数”调用带参数的函数：

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

亲自试一试

例子 5

更改文档的背景颜色：

document.addEventListener("click", function(){
  document.body.style.backgroundColor = "red";
});

亲自试一试

例子 6

使用 removeEventListener() 方法：

// 添加事件监听器
document.addEventListener("mousemove", myFunction);
// 移除事件监听器
document.removeEventListener("mousemove", myFunction);

亲自试一试

语法

document.addEventListener(type, function, capture)

参数

参数 描述
type

必需。事件名称。

请勿使用 "on" 前缀。

请使用 "click" 而不是 "onclick"。

所有 HTML DOM 事件都列在：

HTML DOM Event 对象参考手册
function

必需。事件发生时运行的函数。

Wenn ein Ereignis auftritt, wird das Ereignisobjekt als erster Parameter an die Funktion weitergegeben.

Der Typ des Ereignisobjekts hängt vom angegebenen Ereignis ab. Zum Beispiel gehört das "click"-Ereignis zum MouseEvent-Objekt.
capture

Optional (Standard = false).

  • true - Der Handler wird im Erfassungsstadium ausgeführt
  • false - Der Handler wird im Blasenstadium ausgeführt

Rückgabewert

Keine.

Technische Details

Diese Methode fügt die angegebene Event-Listener-Funktion zur Sammlung der Observer des aktuellen Knotens hinzu, um Ereignisse des angegebenen Typs type zu verarbeiten. Wenn capture wird auf true gesetzt, wird der Observer als Capturing-Event-Listener registriert. Wenn capture wird auf false gesetzt, wird er als normaler Event-Listener registriert.

addEventListener() kann mehrmals aufgerufen werden, mehrere Event-Handler für denselben Typ eines Ereignisses auf demselben Knoten registrieren. Beachten Sie jedoch, dass DOM die Reihenfolge der Aufrufe mehrerer Event-Handler nicht bestimmen kann.

Wenn eine Event-Listener-Funktion auf demselben Knoten mit dem gleichen type und capture Der Parameter zweimal registriert wurde, wird die zweite Registrierung ignoriert. Wenn ein neuer Event-Listener auf einem Knoten registriert wird, während ein Ereignis auf diesem Knoten bearbeitet wird, wird der neue Event-Listener für dieses Ereignis nicht aufgerufen.

Wenn mit Node.cloneNode() Methode oder Document.importNode() Beim Kopieren eines Document-Knotens werden keine auf den ursprünglichen Knoten registrierten Event-Listener kopiert.

Diese Methode ist auch im Document- und Window-Objekt definiert und funktioniert ähnlich.

Browserunterstützung

document.addEventListener Es ist eine Eigenschaft von DOM Level 2 (2001).

Es wird von allen Browsern vollständig unterstützt:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Unterstützung 9-11 Unterstützung Unterstützung Unterstützung Unterstützung

Verwandte Seiten

Elementmethoden

addEventListener() - Methode

removeEventListener() - Methode

Dokumentmethoden

addEventListener() - Methode

removeEventListener() - Methode

Tutorial

HTML DOM EventListener

Vollständige Liste der DOM-Events