Wie übergeben Sie Argumente an die AddEventListener-Listener-Funktion?

Warum holen Sie sich nicht einfach die Argumente aus dem Zielattribut des Ereignisses?

Beispiel:

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

JavaScript ist eine prototypenorientierte Sprache, denken Sie daran!

Diese Frage ist alt, aber ich dachte, ich würde eine Alternative mit .bind () von ES5 anbieten - für die Nachwelt. :)

function some_func(otherFunc, ev) {
    // magic happens
}
someObj.addEventListener("click", some_func.bind(null, some_other_func), false);

Beachten Sie nur, dass Sie Ihre Listener-Funktion mit dem ersten Parameter als Argument definieren müssen, das Sie in bind übergeben (Ihre andere Funktion), und der zweite Parameter ist jetzt das Ereignis (anstelle des ersten, wie es gewesen wäre). .

Sie können Ereignislistener mit Argumenten hinzufügen und entfernen, indem Sie eine Funktion als Variable deklarieren.

myaudio.addEventListener('ended',funcName=function(){newSrc(myaudio)},false);

newSrc ist die Methode mit myaudio als Parameter funcName ist die Funktionsnamenvariable

Sie können den Listener mit myaudio.removeEventListener('ended',func,false); entfernen.

Eine ziemlich alte Frage, aber ich hatte heute das gleiche Problem. Die sauberste Lösung, die ich gefunden habe, ist das Konzept des Currying.

Der Code dafür:

someObj.addEventListener('click', some_function(someVar));

var some_function = function(someVar) {
    return function curried_func(e) {
        // do something here
    }
}

Durch Benennen der aktuellen Funktion können Sie Object.removeEventListener aufrufen, um die Registrierung des eventListener zu einem späteren Zeitpunkt aufzuheben.

Sie können einfach alle notwendigen Argumente mit 'bind' binden:

root.addEventListener('click', myPrettyHandler.bind(null, event, arg1, ... ));

Auf diese Weise erhalten Sie immer die Variablen event, arg1 und andere Elemente, die an myPrettyHandler übergeben werden.

http://passy.svbtle.com/partial-application-in-javascript-using-bind

Sie können somevar per value (nicht als Referenz) über eine JavaScript-Funktion übergeben, die als closet bezeichnet wird:

var someVar='Origin';
func = function(v){
    console.log(v);
}
document.addEventListener('click',function(someVar){
   return function(){func(someVar)}
}(someVar));
someVar='changed'

Oder Sie schreiben eine allgemeine Wrap-Funktion wie wrapEventCallback:

function wrapEventCallback(callback){
    var args = Array.prototype.slice.call(arguments, 1);
    return function(e){
        callback.apply(this, args)
    }
}
var someVar='Origin';
func = function(v){
    console.log(v);
}
document.addEventListener('click',wrapEventCallback(func,someVar))
someVar='changed'

Hier ist wrapEventCallback(func,var1,var2) wie: 

func.bind(null, var1,var2)

Der someVar-Wert sollte nur im some_function()-Kontext verfügbar sein, nicht aus dem Listener.

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

und benutze stattdessen newVar.

Die andere Möglichkeit ist, den someVar-Wert von some_function() zur weiteren Verwendung im Listener (als neue lokale Variable) zurückzugeben:

var someVar = some_function(someVar);

Hier ist noch ein anderer Weg (Dieser arbeitet innen für Loops):

var someVar = some_other_function();
someObj.addEventListener("click", 

function(theVar){
    return function(){some_function(theVar)};
}(someVar),

false);

Benutzen 

   el.addEventListener('click',
    function(){
        // this will give you the id value 
        alert(this.id);    
    },
false);

Und wenn Sie einen benutzerdefinierten Wert an diese anonyme Funktion übergeben möchten, ist dies der einfachste Weg 

 // this will dynamically create property a property
 // you can create anything like el.<your  variable>
 el.myvalue = "hello world";
 el.addEventListener('click',
    function(){
        //this will show you the myvalue 
        alert(el.myvalue);
        // this will give you the id value 
        alert(this.id);    
    },
false);

Funktioniert perfekt in meinem Projekt. Hoffe das wird helfen

Function.prototype.bind () ist der Weg, um eine Zielfunktion an einen bestimmten Bereich zu binden und optional das this-Objekt in der Zielfunktion zu definieren.

someObj.addEventListener("click", some_function.bind(this), false);

Oder um einen Teil des lexikalischen Bereichs zu erfassen, zum Beispiel in einer Schleife:

someObj.addEventListener("click", some_function.bind(this, arg1, arg2), false);

Wenn der Parameter this in der Zielfunktion nicht benötigt wird:

someObj.addEventListener("click", some_function.bind(null, arg1, arg2), false);

Probieren Sie auch diese aus (IE8 + Chrome. Ich weiß es nicht für FF):

function addEvent(obj, type, fn) {
    eval('obj.on'+type+'=fn');
}

function removeEvent(obj, type) {
    eval('obj.on'+type+'=null');
}

// Use :

function someFunction (someArg) {alert(someArg);}

var object=document.getElementById('somObject_id') ;
var someArg="Hi there !";
var func=function(){someFunction (someArg)};

// mouseover is inactive
addEvent (object, 'mouseover', func);
// mouseover is now active
addEvent (object, 'mouseover');
// mouseover is inactive

Hoffe es gibt keine Tippfehler :-)

Eine Möglichkeit ist dies mit einer outer-Funktion:

elem.addEventListener('click', (function(numCopy) {
  return function() {
    alert(numCopy)
  };
})(num));

Diese Methode zum Umschließen einer anonymen Funktion in Klammern und deren sofortiges Aufrufen wird als IIFE (Sofortiger Aufruf der Funktion) bezeichnet.

Sie können ein Beispiel mit zwei Parametern in http://codepen.io/froucher/pen/BoWwgz überprüfen.

catimg.addEventListener('click', (function(c, i){
  return function() {
    c.meows++;
    i.textContent = c.name + '\'s meows are: ' + c.meows;
  }
})(cat, catmeows));

Ich steckte fest, als ich es in einer Schleife benutzte, um Elemente zu finden und Listener hinzuzufügen. Wenn Sie es in einer Schleife verwenden, wird dies perfekt funktionieren

for (var i = 0; i < states_array.length; i++) {
     var link = document.getElementById('apply_'+states_array[i].state_id);
     link.my_id = i;
     link.addEventListener('click', function(e) {   
        alert(e.target.my_id);        
        some_function(states_array[e.target.my_id].css_url);
     });
}

Um Argumente an die Callback-Funktion eines eventListener zu senden, müssen Sie eine isolierte Funktion erstellen und Argumente an diese isolierte Funktion übergeben.

Hier ist eine nette kleine Helferfunktion, die Sie verwenden können. Basierend auf "Hallo Welt" Beispiel oben.)

Eine Sache, die auch benötigt wird, ist, einen Verweis auf die Funktion beizubehalten, damit wir den Listener sauber entfernen können.

// Lambda closure chaos.
//
// Send an anonymous function to the listener, but execute it immediately.
// This will cause the arguments are captured, which is useful when running 
// within loops.
//
// The anonymous function returns a closure, that will be executed when 
// the event triggers. And since the arguments were captured, any vars 
// that were sent in will be unique to the function.

function addListenerWithArgs(elem, evt, func, vars){
    var f = function(ff, vv){
            return (function (){
                ff(vv);
            });
    }(func, vars);

    elem.addEventListener(evt, f);

    return f;
}

// Usage:

function doSomething(withThis){
    console.log("withThis", withThis);
}

// Capture the function so we can remove it later.
var storeFunc = addListenerWithArgs(someElem, "click", doSomething, "foo");

// To remove the listener, use the normal routine:
someElem.removeEventListener("click", storeFunc);

Der folgende Ansatz hat für mich gut funktioniert. Geändert von hier .

function callback(theVar) {
  return function() {
    theVar();
  }
}

function some_other_function() {
  document.body.innerHTML += "made it.";
}

var someVar = some_other_function;
document.getElementById('button').addEventListener('click', callback(someVar));

<!DOCTYPE html>
<html>
  <body>
    <button type="button" id="button">Click Me!</button>
  </body>
</html>

    var EV = {
        ev: '',
        fn: '',
        elem: '',
        add: function () {
            this.elem.addEventListener(this.ev, this.fn, false);
        }
    };

    function cons() {
        console.log('some what');
    }

    EV.ev = 'click';
    EV.fn = cons;
    EV.elem = document.getElementById('body');
    EV.add();

//If you want to add one more listener for load event then simply add this two lines of code:

    EV.ev = 'load';
    EV.add();

Wenn ich mich nicht irre, wenn Sie die Funktion mit bind aufrufen, wird eine neue Funktion erstellt, die von der bind-Methode zurückgegeben wird. Dies führt später zu Problemen oder wenn Sie den Ereignis-Listener entfernen möchten, da er im Grunde wie eine anonyme Funktion aussieht:

// Possible:
function myCallback() { /* code here */ }
someObject.addEventListener('event', myCallback);
someObject.removeEventListener('event', myCallback);

// Not Possible:
function myCallback() { /* code here */ }
someObject.addEventListener('event', function() { myCallback });
someObject.removeEventListener('event', /* can't remove anonymous function */);

Denken Sie also daran.

Wenn Sie ES6 verwenden, können Sie dasselbe wie vorgeschlagen, jedoch ein bisschen sauberer machen:

someObject.addEventListener('event', () => myCallback(params));

Du brauchst:

newElem.addEventListener('click', {
    handleEvent: function (event) {
        clickImg(parameter);
    }
});

Schöne einzeilige Alternative

element.addEventListener('dragstart',(evt) => onDragStart(param1, param2, param3, evt));

function onDragStart(param1, param2, param3, evt) {

 //some action...

}

Der folgende Code hat für mich gut funktioniert (Firefox):

for (var i=0; i<3; i++) {
   element = new ...   // create your element
   element.counter = i;
   element.addEventListener('click', function(e){
        console.log(this.counter);
        ...            // another code with this element
   }, false);
}

Ausgabe:

0
1
2

    $form.addEventListener('submit', save.bind(null, data, keyword, $name.value, myStemComment));
    function save(data, keyword, name, comment, event) {

So habe ich die Veranstaltung richtig bestanden.

Die folgende Antwort ist korrekt, der folgende Code funktioniert jedoch nicht im IE8, wenn Sie die js-Datei mit yuicompressor komprimiert haben. (In der Tat verwenden immer noch die meisten US-Völker IE8)

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

Wir können das obige Problem also wie folgt beheben und funktionieren in allen Browsern einwandfrei

var someVar, eventListnerFunc;
someVar = some_other_function();
eventListnerFunc = some_function(someVar);
someObj.addEventListener("click", eventListnerFunc, false);

Ich hoffe, es wäre nützlich für jemanden, der die js-Datei in der Produktionsumgebung komprimiert.

Viel Glück!!

Wahrscheinlich nicht optimal, aber einfach genug für diejenigen, die nicht besonders versiert sind. Setzen Sie die Funktion, die addEventListener aufruft, in eine eigene Funktion. Auf diese Weise behalten alle darin übergebenen Funktionswerte ihren eigenen Gültigkeitsbereich bei, und Sie können diese Funktion so oft durchlaufen, wie Sie möchten.

Beispiel Ich habe mit dem Lesen von Dateien gearbeitet, da ich eine Vorschau des Bildes und des Dateinamens erfassen und rendern musste. Ich habe eine Weile gebraucht, um asynchrone Probleme bei der Verwendung eines Upload-Typs für mehrere Dateien zu vermeiden. Ich würde versehentlich den gleichen "Namen" auf allen Rendern sehen, obwohl ich unterschiedliche Dateien hochgeladen habe.

Ursprünglich befand sich die gesamte Funktion readFile () in der Funktion readFiles (). Dies führte zu Problemen mit dem asynchronen Gültigkeitsbereich.

    function readFiles(input) {
      if (input.files) {
        for(i=0;i<input.files.length;i++) {

          var filename = input.files[i].name;

          if ( /\.(jpe?g|jpg|png|gif|svg|bmp)$/i.test(filename) ) {
            readFile(input.files[i],filename);
          }
       }
      }
    } //end readFiles



    function readFile(file,filename) {
            var reader = new FileReader();

            reader.addEventListener("load", function() { alert(filename);}, false);

            reader.readAsDataURL(file);

    } //end readFile

Diese Lösung kann gut aussehen

var some_other_function = someVar => function() {
}

someObj.addEventListener('click', some_other_function(someVar));

oder Wertgegenstände binden ist auch gut

In allen Funktionen gibt es eine spezielle Variable: Argumente . Sie können Ihre Parameter als anonyme Parameter übergeben und (über die Reihenfolge) über die Variable arguments auf sie zugreifen.

Beispiel:

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