Ich möchte einen eventHandler erstellen, der das Ereignis und einige Parameter übergibt. Das Problem ist, dass die Funktion das Element nicht erhält. Hier ist ein Beispiel:
doClick = function(func){
var elem = .. // the element where it is all about
elem.onclick = function(e){
func(e, elem);
}
}
doClick(function(e, element){
// do stuff with element and the event
});
Das 'elem' muss außerhalb der anonymen Funktion definiert werden. Wie kann ich das übergebene Element in der anonymen Funktion verwenden? Gibt es eine Möglichkeit, dies zu tun?
Und was ist mit addEventListener? Ich scheine das Ereignis überhaupt nicht über einen addEventListener weiterleiten zu können, oder?
Aktualisieren
Ich schien das Problem mit "diesem" zu beheben.
doClick = function(func){
var that = this;
this.element.onclick = function(e){
func(e, that);
}
}
Wo dies this.element enthält, auf das ich in der Funktion zugreifen kann.
Der addEventListener
Aber ich wundere mich über den addEventListener:
function doClick(elem, func){
element.addEventListener('click', func(event, elem), false);
}
javascript
events
event-handling
handler
sebas2day
quelle
quelle
e.target
/e.currentTarget
?Antworten:
Ich verstehe nicht genau, was Ihr Code versucht, aber Sie können Variablen in jedem Event-Handler verfügbar machen, indem Sie die Vorteile von Funktionsabschlüssen nutzen:
Abhängig von Ihrer genauen Codierungssituation können Sie so gut wie immer eine Art Schließung vornehmen, um den Zugriff auf die Variablen für Sie zu erhalten.
Aus Ihren Kommentaren geht Folgendes hervor:
Anschließend können Sie dies mit einer selbstausführenden Funktion (IIFE) tun, die die gewünschten Argumente in einem Abschluss erfasst, während sie ausgeführt wird, und die eigentliche Ereignishandlerfunktion zurückgibt:
Weitere Informationen zur Funktionsweise eines IIFE finden Sie in den folgenden Referenzen:
Javascript-Wrapping-Code in anonymer Funktion
Sofort aufgerufener Funktionsausdruck (IIFE) in JavaScript - Übergabe von jQuery
Was sind gute Anwendungsfälle für selbstausführende anonyme JavaScript-Funktionen?
Diese letzte Version ist vielleicht einfacher zu sehen, was es so macht:
Es ist auch möglich
.bind()
, einem Rückruf Argumente hinzuzufügen. Alle Argumente, an die Sie übergeben,.bind()
werden den Argumenten vorangestellt, die der Rückruf selbst haben wird. Sie könnten dies also tun:quelle
element.addEventListener('click', func(event, this.elements[i]))
. Javascript funktioniert einfach nicht so. Es gibt andere Möglichkeiten, Verschlüsse zu verwenden, aber Sie können es nicht so machen, wie Sie es geschrieben haben. addEventListener ruft seinen Rückruf mit genau einem Argument (dem Ereignis) auf, und Sie können dies in keiner Weise ändern.function eventFunction (arg, evt) { console.log(arg[0],arg[1],arg[2]) console.log(evt) } var el = document.getElementById('elementID'); el.addEventListener('click', eventFunction.bind(el,[1,2,3]))
Beachten Sie, dass das Ereignisargument in den Argumenten für die Funktion immer das letzte ist und in der Bindemethode nicht explizit deklariert wird.Es ist eine alte, aber häufig gestellte Frage. Lassen Sie mich diesen hier hinzufügen.
Mit Pfeil Funktion Syntax können Sie ihm prägnante Art und Weise erreichen , da es lexikalisch binded und verkettet werden kann.
Ein Pfeilfunktionsausdruck ist eine syntaktisch kompakte Alternative zu einem regulären Funktionsausdruck, jedoch ohne eigene Bindung an die Schlüsselwörter this, arguments, super oder new.target.
Wenn Sie den Ereignis-Listener bereinigen müssen:
Hier ist verrückter Einzeiler:
Fügsamere Version : Eher für jede vernünftige Arbeit geeignet.
quelle
this
und der Handler konnte auf das zugreifen, was er braucht.Sie können versuchen, die Bindemethode zu verwenden. Ich denke, dies erreicht das, wonach Sie gefragt haben. Wenn nichts anderes, ist es immer noch sehr nützlich.
quelle
Angesichts der Aktualisierung der ursprünglichen Frage scheint es Probleme mit dem Kontext ("dies") beim Übergeben von Ereignishandlern zu geben. Die Grundlagen werden zB hier erklärt http://www.w3schools.com/js/js_function_invocation.asp
Eine einfache Arbeitsversion Ihres Beispiels könnte lauten
Siehe auch Javascript call () & apply () vs bind ()?
quelle
Kurze Antwort:
quelle
param1
oder nicht überschritten wirdparam2
. Wenn sich diese Werte ändern, werden sie nicht auf den Wert gesetzt, der sie während der Erstellung des Ereignishandlers waren. Sie werden nur auf den aktuellen Wert gesetzt. Darüber hinaus unterscheidet sich dies nicht vom Festlegen einer Variablen außerhalb des Bereichs der Ereignis-Listener-Funktion und dem Verweisen auf diese Variable im Ereignishandler, sodass die Übergabe von Parametern überhaupt nicht möglich ist.param1
istnoodle
das erste Mal , die addEventListener genannt wird, und das zweite Mal , wenn Sie es nennen,param
istcheese
dann , wenn die Ereignis - Listenerclick
feuert,param1
wird festgelegt werdencheese
und nichtnoodle
. Daher wird kein "Abschluss" verwendet, um den Wert zu speichern, der zum Zeitpunkt des Hinzufügens des Ereignis-Listeners vorhanden war. Es gibt Szenarien, in denen der Ereignis-Listener mehrmals hinzugefügt werden muss, die nicht dargestellt werden müssen, damit mein Punkt gültig ist.this
Innerhalb vondoThings
befindet sich das Fensterobjekt. Versuchen Sie stattdessen Folgendes:quelle
quelle