Wie kann ich Argumente an Event-Listener-Funktionen in JavaScript übergeben?

Ereignis-Listener: Argumente an Listener-Funktionen übergeben

Beim Anhängen von Ereignis-Listenern mit der Methode addEventListener kann es Situationen geben, in denen Sie übergeben müssen Argumente für die Listener-Funktion. Ein solches Szenario beinhaltet das Abrufen des Werts einer Variablen, die außerhalb des Gültigkeitsbereichs des Listeners definiert ist.

Szenario und Problem

Betrachten Sie den folgenden Code:

var someVar = some_other_function();
someObj.addEventListener("click", function(){
    some_function(someVar);
}, false);

Hier ist someVar eine Variable, die außerhalb der Listener-Funktion definiert ist, und unser Ziel ist es, ihren Wert als Argument an some_function zu übergeben, wenn der „Klick“ erfolgt. Ereignis eintritt. Innerhalb der Listener-Funktion wird someVar jedoch als neue Variable behandelt, was zu einem Problem führt, bei dem auf den beabsichtigten Wert nicht zugegriffen werden kann.

Vorgeschlagene Lösung: Nutzung der Eigenschaften des Ereignisziels

Anstatt Argumente explizit zu übergeben, sollten Sie erwägen, auf die Eigenschaften des Ereignisziels zuzugreifen, um die erforderlichen Informationen abzurufen. Im obigen Beispiel können Sie eine benutzerdefinierte Eigenschaft myParam an someObj anhängen, wie unten gezeigt:

const someInput = document.querySelector('button');
someInput.addEventListener('click', myFunc, false);
someInput.myParam = 'This is my parameter';

function myFunc(evt)
{
  window.alert(evt.currentTarget.myParam);
}

Jetzt können Sie innerhalb der Listener-Funktion myFunc auf den Parameterwert zugreifen, indem Sie auf evt.currentTarget.myParam verweisen. Diese Methode macht die explizite Übergabe von Argumenten überflüssig und stellt sicher, dass der richtige Wert erhalten wird.

Das obige ist der detaillierte Inhalt vonWie kann ich Argumente an Event-Listener-Funktionen in JavaScript übergeben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!