Wie Argumente addEventListener Listener-Funktion übergeben?

Question

Die Situation ist so etwas wie -

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

Das Problem ist, dass der Wert von someVar innerhalb der Listener-Funktion des addEventListener nicht sichtbar ist, wo es wahrscheinlich als neuer Variable behandelt wird.

Answer 1

Es gibt absolut nichts falsch mit dem Code, den Sie geschrieben haben. Sowohl some_function und someVar sollten erreichbar sein, falls sie im Kontext zur Verfügung standen, wo anonym

function() { some_function(someVar); } 

wurde erstellt.

Überprüfen Sie, ob der Alarm Sie den Wert erhalten Sie gesucht haben, sollten Sie es im Rahmen der anonymen Funktion zugänglich sein wird (es sei denn, Sie mehr Code haben, der neben dem Anruf auf der gleichen someVar Variable arbeitet auf addEventListener)

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

Answer 2

Warum nicht nur 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 Prototyp-orientierte Sprache, denken Sie daran!

Answer 3

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

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

Seien Sie sich bewusst sein, dass Sie benötigen, um Ihre Listener-Funktion mit dem ersten param als Argument gründen Sie in bind vorbei sind (Ihre andere Funktion) und den zweiten param ist jetzt das Ereignis (statt der ersten, wie es wäre, gewesen).

Answer 4

Sie können Ereignis-Listenern mit Argumenten hinzufügen und entfernen, indem eine Funktion als eine Variable zu deklarieren.

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

newSrc ist die Methode, mit myaudio als Parameter funcName ist der Name der Funktion Variable

Sie können den Hörer abnehmen mit  myaudio.removeEventListener('ended',func,false);

Answer 5

Ganz und alte Frage, aber ich hatte das gleiche Problem heute. Sauberste Lösung, die ich gefunden ist das Konzept des currying zu verwenden.

Der Code für das:

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

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

Durch die curried Funktion Namensgebung ermöglicht es Ihnen, Object.removeEventListener nennen die eventlistener zu einer späteren Ausführungszeit deregistrieren.

Answer 6

Sie können nur alle notwendigen Argumente mit ‚binden‘ binden:

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

Auf diese Weise werden Sie immer die event bekommen, arg1 und andere Sachen übergeben myPrettyHandler.

http://passy.svbtle.com/partial-application- in-Javascript-mit-bind

Answer 7

Sie könnten passieren somevar nach Wert (ohne Bezug) über eine Javascript-Funktion bekannt als Schließung :

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

Sie können auch eine gemeinsame Wrap-Funktion wie wrapEventCallback schreiben:

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 wrapEventCallback(func,var1,var2) ist wie:

func.bind(null, var1,var2)

Answer 8

someVar Wert sollte nur in some_function() Zusammenhang nicht von Zuhörer zugänglich sein. Wenn Sie es innerhalb Zuhörer haben möchten, müssen Sie wie etwas tun:

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

und verwenden newVar statt.

Der andere Weg ist someVar Wert von some_function() zurückzukehren, um es weiter in Listener (als neue lokalen var):

var someVar = some_function(someVar);

Answer 9

Hier ist noch eine andere Art und Weise (Dieser funktioniert nach innen für Schleifen):

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

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

false);

Answer 10

Mit

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

Und wenn Sie alle benutzerdefinierten Wert in dieser anonymen Funktion zu übergeben wollen, dann ist der einfachste Weg, es zu tun,

 // 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, dass dies helfen wird,

Answer 11

Function.prototype.bind () ist der Weg, um eine Zielfunktion zu einem bestimmten Umfang und optional definieren das this Objekt innerhalb der Zielfunktion.

zu binden

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

oder einen Teil des lexikalischen Gültigkeitsbereiches zu erfassen, zum Beispiel in einer Schleife:

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

Wenn schließlich der this Parameter nicht innerhalb der Zielfunktion benötigt:

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

Answer 12

Versuchen Sie auch diese (. IE8 + Chrome ich nicht für FF kennen):

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

Hoffnung gibt es keine Tippfehler: -)

Answer 13

Senden Argumente an einen Callback-Funktion des eventlistener erfordert eine isolierte Funktion erstellen und Argumente zu dieser isolierten Funktion übergeben.

Hier ist eine nette kleine Helfer Funktion, die Sie verwenden können. Basierend auf „Hallo Welt“ -Beispiel oben.)

Eine Sache, die auch benötigt wird, ist ein Verweis auf die Funktion halten, so können wir den Hörer sauber entfernen.

// 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);

Answer 14

Eine Möglichkeit, tut dies mit einer Außen Funktion :

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

Dieses Verfahren zur Herstellung einer anonymen Funktion in Klammern Einwickeln und es sofort ein IIFE ruft genannt (Sofort-Funktion aufgerufen, Expression)

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

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

Answer 15

Ich war in diesem steckt, wie ich es in einer Schleife wurde für Elemente zu finden, und das Hinzufügen von listner zu. Wenn Sie es in einer Schleife verwenden, dann wird dies perfekt funktioniert

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);
     });
}

Answer 16

Wenn mich nicht alles täuscht über die Funktion mit bind Aufruf tatsächlich schafft eine neue Funktion, die von der bind Methode zurückgegeben wird. Dies wird Ihnen später Probleme verursachen oder wenn Sie möchten, den Ereignis-Listener zu entfernen, da es im Grunde wie eine anonyme Funktion ist:

// 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 */);

nehmen, so dass im Auge behalten.

Wenn Sie ES6 verwenden Sie könnten das gleiche tun, wie vorgeschlagen, aber etwas sauberer:

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

Answer 17

    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();

Answer 18

Der folgende Ansatz gut für mich gearbeitet. 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>

Answer 19

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

Das ist, wie ich Ereignis richtig übergeben.

Answer 20

Die folgende Antwort ist richtig, aber der folgende Code in IE8 nicht funktioniert, wenn Sie annimmt, die js-Datei mit yuicompressor komprimieren. (In der Tat, nach wie vor die meisten der Völker US mit IE8)

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

So

können wir das obige Problem beheben wie folgt und es funktioniert gut in allen Browsern

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

Hope, wäre es für jemanden nützlich sein, die die JS-Datei in der Produktionsumgebung wird komprimiert wird.

Good Luck !!

Answer 21

Es gibt eine spezielle Variable in allen Funktionen: Argumente . Sie können Ihre Parameter als anonyme Parameter übergeben und auf sie zugreifen (im Auftrag) durch die Argumente Variable.

Beispiel:

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

Answer 22

Der folgende Code funktionierte gut für mich (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

Answer 23

Sie müssen:

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

Answer 24

Diese Lösung kann gut für uns

var some_other_function = someVar => function() {
}

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

oder binden Variablen wird auch gut

Answer 25

schön eine Zeile Alternative

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

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

 //some action...

}

Answer 26

Wahrscheinlich nicht optimal, aber einfach genug für diejenigen, die nicht Super js versiert. Setzen Sie die Funktion, die addEventListener in seine eigene Funktion aufruft. Auf diese Weise alle Funktionswerte in sie bestanden ihre eigenen Umfang erhalten und man kann so viel über diese Funktion wiederholen, wie Sie wollen.

Beispiel arbeitete ich heraus, mit Datei zu lesen, wie ich eine Vorschau des Bildes und den Dateinamen zu erfassen benötigt und rendern. Es dauerte eine Weile asynchrone Probleme zu vermeiden, wenn ein mehr Datei-Upload-Typen verwendet wird. Ich würde aus Versehen den gleichen ‚name‘ sehen auf alle macht trotz unterschiedlicher Hochladen von Dateien.

Ursprünglich alle readfile () Funktion war innerhalb der readFiles () Funktion. Dieses asynchrone Scoping-Probleme verursacht.

    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

Answer 27

Andere alternativer, vielleicht nicht so elegant wie die Verwendung von binden, aber es ist gültig für Veranstaltungen in einer Schleife

for (var key in catalog){
    document.getElementById(key).my_id = key
    document.getElementById(key).addEventListener('click', function(e) {
        editorContent.loadCatalogEntry(e.srcElement.my_id)
    }, false);
}

Es wurde für Google Chrome-Erweiterungen getestet und vielleicht e.srcElement müssen von e.source in anderen Browsern ersetzt werden

Ich fand diese Lösung des Kommentar mit gepostet von Imatoria aber ich kann es nicht so nützlich markieren, weil ich nicht genug Ruf haben: D