Ereignis-Abhören in JavaScript

Die neuesten Funktionen der JavaScript-Ereignisbehandlung überwachen Ereignisse auf dem Element.

Wir verwendenaddEventListener()verwenden, um die Ereignisse direkt den Attributen des Elements zuzuweisen.

addEventListener() Methode

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

Wir können das Beispiel mit zufälliger Farbe (aus dem vorherigen Kapitel) wie folgt neu schreiben:

document.querySelector("button").addEventListener("click", bgChange);
function bgChange() {
　　　let color = "rgb("　+　random(255)　+　",　+　random(255)　+　",　+　random(255)　+　")";
　　　document.body.style.backgroundColor = color;
}

Wir verwenden immer noch mitvorhergleichebgChange()Funktion. Wir werdenaddEventListener()Methoden werden auf den Button angehängt.

addEventListener() Akzeptiert zwei Pflichtparameter-Zu überwachende Ereignisse und Ereignisabhörer-Rückrufe.

Diese Methode ist ähnlich wie die Ereignisbehandlungsattribute (voriges Kapitel), aber die Syntax ist erheblich unterschiedlich.

Syntax:

element.addEventListener(event, listener, useCapture)

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

Der zweite Parameter ist die zu aufrufende Abhörfunktion, wenn das Ereignis eintritt.

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

Fügen Sie den Ereignisabhörer dem Element hinzu

Bitte beachten Sie, dass Sie alle Codezeilen inaddEventListener()Es ist sehr angemessen, dies in einer anonymen Funktion im Methodenkontext zu tun:

let para = document.querySelector("#para");
para.addEventListener("click", function() {
this.innerHTML = "Hello world";
});

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

let para = document.querySelector("#para");
para.addEventListener("click", changeText);
function changeText() {
　　　para.innerHTML = "Hello world";
}

Mehrere Event-Listener demselben Element hinzufügen

Erst auf den ersten Blick scheint der Event-Listener mit dem Ereignisbehandlungsattribut sehr ähnlich zu sein, aber sie haben einige Vorteile. Wir können mehrere Event-Listener auf demselben Element einrichten, wie im folgenden Beispiel gezeigt wird:

document.querySelector("button").addEventListener("click", myFunc);
document.querySelector("button").addEventListener("click", anotherFunc);

Wir können verschiedene Arten von Ereignissen an einem Element hinzufügen:

document.querySelector("button").addEventListener("mouseenter", myFunc1);
document.querySelector("button").addEventListener("click", myFunc2);
document.querySelector("button").addEventListener("mouseout", myFunc3);

Übermitteln Sie Parameter

Bei der Übermittlung von Parameterwerten verwenden Sie bitte anonyme Funktionen, die die Parameter an die angegebene Funktion übergeben:

var btn = document.querySelector("button");
btn.addEventListener("click", function() {
myFunc(x, y);
});

Event-Listener dem Window-Objekt hinzufügen

Außerdem können SieaddEventListener()inDokumentundFensterObjekt verwendet.

In diesem Beispiel wird folgendesaddEventListener()Der Methodenaufruf fügt das Klickereignis (click) dem Dokument hinzu:

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

In diesem Beispiel wird dieseaddEventListener()Der Methodenaufruf fügt das Größenänderungsereignis (resize) dem Fenster hinzu:

window.addEventListener("resize", function() {
box.innerHTML = Math.random();
});

Derzeit ist das Hinzufügen von Ereignisслушern die häufigste und bevorzugte Methode zur Verarbeitung von Ereignissen in JavaScript.

removeEventListener()-Methode verwenden

Man kann auch dieremoveEventListener()Methoden löschen ein oder alle Ereignisse aus einem Element.

var box = document.getElementById("para");
//　Fügen Sie einen Ereignisbehandler zu einem P-Element mit der ID="para" hinzu.
box.addEventListener("mousemove", myFunc);
//　Entfernen Sie den Ereignisbehandler von einem P-Element mit der ID="para".
box.removeEventListener("mousemove", myFunc);

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

Der zweite Parameter ist die Funktion, die wir aufrufen möchten, wenn das Ereignis auftritt.

Mehr Lesen

JavaScript-Referenz:HTML DOM-Event-Objekt Referenz