English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

JavaScript Objekt

JavaScript Referenzhandbuch

JS DOM Referenzhandbuch

HTML DOM addEventListener() Methode

HTML DOM Document-Objekt

document.addEventListener()Methode, um Event-Handler dem Dokument hinzuzufügen.

Verwendungdocument.removeEventListener()Methode, um Event-Handler, die zusammen mit der Methode addEventListener() hinzugefügt werden, zu entfernen.

Verwendungelement .addEventListener()Diese Methode fügt den Ereignisbehandler zum angegebenen Element hinzu.

Syntax:

document.addEventListener(event, listener, useCapture)
document.addEventListener("click",　function()　{
alert("Hello World!!!");
});
Testen Sie heraus‹/›

Browserkompatibilität

Die Zahlen in der Tabelle geben die erste Browserversion an, die die Methode addEventListener() vollständig unterstützt:

Methode
addEventListener()1171.09

Parameterwert

ParameterBeschreibung
event(Erforderlich) Das Ereignis kann jedes gültige JavaScript Ereignis sein. Bei der Verwendung von Ereignissen wird kein "on"-Präfix verwendet, z.B. "click" anstelle von "onclick","mousedown" anstelle von "onmousedown".
Für eine Liste aller HTML DOM Ereignisse, lesen Sie bitte unser vollständigesHTML DOM Ereignisobjekt Referenz.
listener(Erforderlich) Eine JavaScript-Funktion, die auf das Ereignis reagieren kann.
Wenn ein Ereignis auftritt, wird das Ereignisobjekt als erstes Argument an die Funktion übergeben. Der Typ des Ereignisobjekts hängt vom angegebenen Ereignis ab. Zum Beispiel gehört das "click"-Ereignis zum MouseEvent-Objekt.
useCapture(Optional) Boolean-Wert, der angibt, ob im Capturing- oder Bubbling-Phasen der Ereignisablauf ausgeführt wird. Standardwert ist false.
Mögliche Werte:

  • true-Der Ereignisbehandler wird im Capturing-Phasen ausgeführt

  • false-Der Ereignisbehandler wird im Bubbling-Phasen ausgeführt

Sie können in unserenim JavaScript EreignisverteilungstutorialMehr Informationen über die Ereignisverteilung lesen

Technische Details

Rückgabewert:Keine
DOM-Version:DOM 2Ebene

Mehr Beispiele

Fügen Sie den Klickereignis-Handler dem Dokument hinzu. Wenn der Benutzer auf irgendeinen Ort im Dokument klickt, geben Sie im <p>-Element mit id="para" "Hello World" aus:

document.addEventListener("click",　function()　{
document.querySelector("#para").innerHTML = "Hello World!!!";
});
Testen Sie heraus‹/›

Dieser Beispielbezug auf eine externe "benannte" Funktion:

document.addEventListener("click", myFunc);
function myFunc() {
　　　document.body.style.backgroundColor = "coral";
}
Testen Sie heraus‹/›

Sie können viele Ereignisse dem Dokument hinzufügen, ohne bestehende Ereignisse zu überschreiben:

document.addEventListener("click", myFunc);
document.addEventListener("click", anotherFunc);
Testen Sie heraus‹/›

Sie können verschiedene Arten von Ereignissen dem Dokument hinzufügen:

document.addEventListener("mouseenter",　myFunc1);
document.addEventListener("click",　myFunc2);
document.addEventListener("mouseout",　myFunc3);
Testen Sie heraus‹/›

Bei der Übermittlung von Parameterwerten verwenden Sie eine anonyme Funktion, die die angegebene Funktion mit den Parametern aufruft:

document.addEventListener("click",　function()　{
myFunc(x,　y);
});
Testen Sie heraus‹/›

Sie können auch schauen

JavaScript-Tutorial:Ereignislistener

JavaScript-Tutorial:Ereignisverteilung

HTML DOM Referenz:document.removeEventListener()

HTML DOM Referenz:element .addEventListener()

HTML DOM Document-Objekt

HTML DOM Element-ObjektHTML DOM Document-Objekt