Comment passer des arguments à la fonction d'écoute addEventListener?

Question

La situation est un peu comme -

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

Le problème est que la valeur de someVar n'est pas visible dans la fonction d'écoute du addEventListener , où elle est probablement traitée comme une nouvelle variable.

Answer 1

Il n'y a absolument aucun problème avec le code que vous avez écrit. some_function et someVar doivent être accessibles, au cas où ils étaient disponibles dans le contexte où anonymous

function() { some_function(someVar); } 

a été créé.

Vérifiez si l'alerte vous donne la valeur recherchée, assurez-vous qu'elle sera accessible dans le cadre de la fonction anonyme (sauf si vous avez plus de code qui fonctionne sur la même variable someVar à côté de l'appel à addEventListener )

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

Answer 2

Pourquoi ne pas simplement obtenir les arguments de l'attribut cible de l'événement?

Exemple:

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 est un langage orienté prototype, rappelez-vous!

Answer 3

Cette question est ancienne mais je pensais proposer une alternative en utilisant .bind () de ES5 - pour la postérité. :)

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

Sachez simplement que vous devez configurer votre fonction d’audience avec le premier paramètre comme argument que vous passez en bind (votre autre fonction) et que le second paramètre est maintenant l’événement (au lieu du premier, comme il le ferait). ont été).

Answer 4

Vous pouvez ajouter et supprimer des eventlisteners avec des arguments en déclarant une fonction en tant que variable.

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

newSrc est la méthode avec myaudio comme paramètre. funcName est la variable du nom de la fonction

Vous pouvez supprimer l'auditeur avec   myaudio.removeEventListener ('terminé', func, false);

Answer 5

C'est une question assez ancienne, mais j'avais le même problème aujourd'hui. La solution la plus propre que j’ai trouvée est d’utiliser le concept de currying.

Le code pour cela:

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

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

En nommant la fonction curryed, cela vous permet d’appeler Object.removeEventListener pour annuler l’enregistrement de eventListener à une heure d’exécution ultérieure.

Answer 6

Vous pouvez simplement lier tous les arguments nécessaires avec 'bind':

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

De cette manière, vous obtiendrez toujours les événements , arg1 et d'autres éléments transmis à myPrettyHandler .

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

Answer 7

Vous pouvez passer certains chiffres par valeur (et non par référence) via une fonctionnalité javascript appelée clôture :

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

Vous pouvez également écrire une fonction de bouclage commune telle que 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'

Ici wrapEventCallback (func, var1, var2) est similaire à:

func.bind(null, var1,var2)

Answer 8

La valeur

someVar ne doit être accessible que dans le contexte some_function () , et non à partir du programme d'écoute. Si vous aimez l'avoir dans listener, vous devez faire quelque chose comme:

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

et utilisez newVar à la place.

L’autre méthode consiste à renvoyer la valeur someVar de some_function () pour l’utiliser ultérieurement dans le programme d’écoute (en tant que nouvelle variable locale):

var someVar = some_function(someVar);

Answer 9

Voici encore un autre moyen (celui-ci fonctionne à l'intérieur des boucles):

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

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

false);

Answer 10

Utiliser

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

Et si vous souhaitez transmettre une valeur personnalisée à cette fonction anonyme, le moyen le plus simple de le faire est

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

Fonctionne parfaitement dans mon projet. Espérons que cela aidera

Answer 11

Function.prototype.bind () est le moyen de lier une fonction cible à une étendue particulière et éventuellement de définir le cet objet dans la fonction cible.

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

Ou pour capturer une partie de la portée lexicale, par exemple dans une boucle:

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

Enfin, si le paramètre this n'est pas nécessaire dans la fonction cible:

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

Answer 12

Essayez aussi ceux-ci (IE8 + Chrome. Je ne sais pas pour 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

J'espère qu'il n'y a pas de fautes de frappe: -)

Answer 13

Pour envoyer des arguments à la fonction de rappel d'un eventListener, il est nécessaire de créer une fonction isolée et de transmettre des arguments à cette fonction isolée.

Voici une jolie petite fonction d’aide que vous pouvez utiliser. Basé sur " hello world " exemple ci-dessus.)

Une chose également nécessaire est de conserver une référence à la fonction afin de pouvoir supprimer l'auditeur proprement.

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

Une solution consiste à utiliser une fonction externe :

.

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

Cette méthode permettant de placer une fonction anonyme entre parenthèses et de l'appeler immédiatement s'appelle une IIFE (expression de fonction appelée immédiatement)

Vous pouvez consulter un exemple avec deux paramètres dans 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

J'étais coincé dans ceci car je l'utilisais dans une boucle pour trouver des éléments et y ajouter un listner. Si vous l'utilisez en boucle, cela fonctionnera parfaitement

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

Si je ne me trompe pas, appeler la fonction avec bind crée en fait une nouvelle fonction qui est renvoyée par la méthode bind . Cela vous causera des problèmes ultérieurement ou si vous souhaitez supprimer l'écouteur d'événements, car il s'agit en gros d'une fonction anonyme:

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

Alors, gardez cela à l'esprit.

Si vous utilisez ES6, vous pouvez faire la même chose que suggéré mais un peu plus propre:

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

L’approche suivante a bien fonctionné pour moi. Modifié à partir de ici .

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) {

C’est ainsi que j’ai fait passer l’événement correctement.

Answer 20

La réponse suivante est correcte mais le code ci-dessous ne fonctionne pas dans IE8 si vous supposez que vous avez compressé le fichier js à l'aide de yuicompressor. (En fait, la plupart des Américains utilisent encore IE8)

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

Donc, nous pouvons résoudre le problème ci-dessus comme suit et cela fonctionne très bien dans tous les navigateurs

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

J'espère que cela serait utile pour quelqu'un qui compresse le fichier js dans un environnement de production.

Bonne chance !!

Answer 21

Toutes les fonctions contiennent une variable spéciale: arguments . Vous pouvez passer vos paramètres sous forme de paramètres anonymes et y accéder (par ordre) au moyen de la variable arguments .

Exemple:

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

Answer 22

Le code suivant a bien fonctionné pour moi (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);
}

Sortie:

0
1
2

Answer 23

Vous avez besoin de:

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

Answer 24

Cette solution peut être intéressante à la recherche

var some_other_function = someVar => function() {
}

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

ou les valeurs de liaison seront également bonnes

Answer 25

belle alternative à une ligne

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

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

 //some action...

}

Answer 26

Probablement pas optimal, mais assez simple pour ceux qui ne sont pas très avertis. Mettez la fonction qui appelle addEventListener dans sa propre fonction. Ainsi, toutes les valeurs de fonction qui y sont passées conservent leur propre portée et vous pouvez parcourir cette fonction autant de fois que vous le souhaitez.

Exemple, j’ai travaillé avec la lecture de fichier car je devais capturer et afficher un aperçu de l’image et du nom de fichier. Il m'a fallu un certain temps pour éviter les problèmes asynchrones lors de l'utilisation d'un type de téléchargement de plusieurs fichiers. Je verrais accidentellement le même 'nom' sur tous les rendus malgré le téléchargement de différents fichiers.

À l'origine, toute la fonction readFile () se trouvait dans la fonction readFiles (). Cela a entraîné des problèmes de portée asynchrones.

    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

Autre alternative, peut-être moins élégante que l'utilisation de bind, mais valable pour les événements en boucle

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

Il a été testé pour les extensions Google Chrome et peut-être que e.srcElement doit être remplacé par e.source dans d'autres navigateurs

J'ai trouvé cette solution à l'aide de la commentaire . posté par Imatoria mais je ne peux pas le marquer comme utile car je n'ai pas assez de réputation: D