Wie kann ich Argumente an eine „addEventListener'-Listener-Funktion in JavaScript übergeben?

Übergabe von Argumenten an die Listener-Funktion addEventListener

In bestimmten Szenarien kann es erforderlich sein, Argumente an die Listener-Funktion von addEventListener zu übergeben. Der folgende Codeausschnitt verdeutlicht eine häufige Situation, in der dies erforderlich sein kann:

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

In diesem Fall wird someVar außerhalb der Listener-Funktion definiert, soll aber innerhalb dieser verwendet werden. Aufgrund der Scoping-Regeln von JavaScript wird someVar jedoch möglicherweise als neue Variable innerhalb der Listener-Funktion erkannt.

Lösung: Argumente vom Ereignisziel abrufen

Anstatt es zu versuchen Wenn Sie Argumente direkt an die Listener-Funktion übergeben möchten, sollten Sie erwägen, sie über das Attribut event.target abzurufen. Dieser Ansatz beinhaltet das Hinzufügen benutzerdefinierter Eigenschaften zum Ziel des Ereignisses.

const someInput = document.querySelector('button');
someInput.addEventListener('click', myFunc, false);
someInput.myParam = 'This is my parameter';
function myFunc(evt) {
  window.alert(evt.currentTarget.myParam);
}

In diesem Beispiel wird einem Schaltflächenelement eine Ereignis-Listener-Funktion namens myFunc zugewiesen. Eine benutzerdefinierte Eigenschaft, myParam, wird der Schaltfläche hinzugefügt und auf einen bestimmten Wert („Das ist mein Parameter“) gesetzt.

Wenn auf die Schaltfläche geklickt wird, wird die myFunc-Funktion mit dem Ereignisobjekt als Parameter ausgeführt . Durch Zugriff auf die Eigenschaft „event.currentTarget“ und dann auf die benutzerdefinierte Eigenschaft „myParam“ kann der Wert („Dies ist mein Parameter“) abgerufen und angezeigt werden.

Diese Technik ermöglicht die Übergabe von Argumenten an Ereignis-Listener-Funktionen in einem bequemer und zuverlässiger.

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