Como passar argumentos para a função de ouvinte addEventListener?

A situação é um pouco parecida.

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

O problema é que o valor de someVarnão é visível dentro da função listener do addEventListener, onde provavelmente está sendo tratado como uma nova variável.

Não há absolutamente nada de errado com o código que você escreveu. Ambos some_functione someVardevem estar acessíveis, caso estejam disponíveis no contexto em que

function() { some_function(someVar); } 

foi criado.

Verifique se o alerta fornece o valor que você estava procurando, verifique se ele estará acessível no escopo da função anônima (a menos que você tenha mais código que opera na mesma someVarvariável ao lado da chamada para addEventListener)

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

Por que não apenas obter os argumentos do atributo target do evento?

Exemplo:

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

<button class="input">Show parameter</button>

JavaScript é uma linguagem orientada a protótipo, lembre-se!

Esta pergunta é antiga, mas pensei em oferecer uma alternativa usando o .bind () do ES5 - para a posteridade. :)

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

Lembre-se de que você precisa configurar sua função de ouvinte com o primeiro parâmetro como o argumento que você está passando para o bind (sua outra função) e o segundo parâmetro agora é o evento (em vez do primeiro, como teria sido) .

Você pode simplesmente ligar todos os argumentos necessários com 'bind':

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

Desta forma, você sempre terá a event, arg1e outras coisas passadas para myPrettyHandler.

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

Questão antiga e antiga, mas tive o mesmo problema hoje. A solução mais limpa que encontrei é usar o conceito de curry.

O código para isso:

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

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

Ao nomear a função ao curry, é possível chamar Object.removeEventListener para cancelar o registro do eventListener em um momento de execução posterior.

Você pode adicionar e remover listener de eventos com argumentos declarando uma função como uma variável.

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

newSrcé o método com myaudio como parâmetro funcNameé a variável do nome da função

Você pode remover o ouvinte com myaudio.removeEventListener('ended',func,false);

Você pode passar algum valor por valor (não por referência) por meio de um recurso javascript conhecido como encerramento :

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

Ou você pode escrever uma função de quebra automática comum, como 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'

Aqui wrapEventCallback(func,var1,var2)está como:

func.bind(null, var1,var2)

someVarO valor deve ser acessível apenas no some_function()contexto, não no ouvinte. Se você deseja tê-lo no ouvinte, deve fazer algo como:

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

e use em seu newVarlugar.

A outra maneira é retornar o someVarvalor some_function()para usá-lo ainda mais no listener (como uma nova var local):

var someVar = some_function(someVar);

Aqui está outra maneira (esta funciona dentro de loops):

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

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

false);

Function.prototype.bind () é a maneira de vincular uma função de destino a um escopo específico e, opcionalmente, definir o thisobjeto na função de destino.

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

Ou para capturar parte do escopo lexical, por exemplo, em um loop:

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

Por fim, se o thisparâmetro não for necessário na função de destino:

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

Usar

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

E se você deseja passar qualquer valor personalizado para essa função anônima, a maneira mais fácil de fazer isso é

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

Funciona perfeitamente no meu projeto. Espero que isso ajude

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

É assim que eu recebo o evento corretamente.

O envio de argumentos para a função de retorno de chamada de eventListener requer a criação de uma função isolada e a passagem de argumentos para essa função isolada.

Aqui está uma pequena função auxiliar que você pode usar. Com base no exemplo "olá mundo" acima.)

Uma coisa que também é necessária é manter uma referência à função para que possamos remover o ouvinte corretamente.

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

Uma maneira é fazer isso com uma função externa :

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

Esse método de agrupar uma função anônima entre parênteses e chamá-la imediatamente é chamado de IIFE (Expressão de Função Imediatamente Invocada)

Você pode verificar um exemplo com dois parâmetros em 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));

Se não me engano, chamar a função com bindcria uma nova função retornada pelo bindmétodo Isso causará problemas mais tarde ou se você deseja remover o ouvinte de eventos, pois é basicamente como uma função anônima:

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

Então, tenha isso em mente.

Se você estiver usando o ES6, poderá fazer o mesmo que o sugerido, mas um pouco mais limpo:

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

boa alternativa de uma linha

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

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

 //some action...

}

Tente também estes (IE8 + Chrome. Não sei por 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

Espero que não haja erros de digitação :-)

Eu estava preso nisso enquanto o usava em um loop para encontrar elementos e adicionar listner a ele. Se você estiver usando em loop, isso funcionará perfeitamente

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

Em 2019, muitas alterações na API, a melhor resposta não funciona mais, sem correção de bug.

compartilhe algum código de trabalho.

Inspirado por todas as respostas acima.

 button_element = document.getElementById('your-button')

 button_element.setAttribute('your-parameter-name',your-parameter-value);

 button_element.addEventListener('click', your_function);


 function your_function(event)
   {
      //when click print the parameter value 
      console.log(event.currentTarget.attributes.your-parameter-name.value;)
   }

Há uma variável especial dentro de todas as funções: argumentos . Você pode passar seus parâmetros como parâmetros anônimos e acessá-los (por ordem) através da variável de argumentos .

Exemplo:

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

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

A abordagem a seguir funcionou bem para mim. Modificado a partir daqui .

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>

A resposta a seguir está correta, mas o código abaixo não está funcionando no IE8 se suponha que você compactou o arquivo js usando o yuicompressor. (De fato, ainda a maioria dos povos dos EUA usa o IE8)

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

Portanto, podemos corrigir o problema acima da seguinte maneira e ele funciona bem em todos os navegadores

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

Espero que seja útil para alguém que está compactando o arquivo js no ambiente de produção.

Boa sorte!!

O código a seguir funcionou bem para mim (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);
}

Resultado:

0
1
2

Você precisa:

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

Provavelmente não é o ideal, mas é simples o suficiente para aqueles que não são super experientes. Coloque a função que chama addEventListener em sua própria função. Dessa forma, quaisquer valores de função passados ​​para ele mantêm seu próprio escopo e você pode iterar sobre essa função quantas vezes quiser.

Exemplo Eu trabalhei com a leitura de arquivos, pois precisava capturar e renderizar uma visualização da imagem e do nome do arquivo. Levei um tempo para evitar problemas assíncronos ao utilizar um tipo de upload de vários arquivos. Eu veria acidentalmente o mesmo 'nome' em todas as renderizações, apesar de enviar arquivos diferentes.

Originalmente, toda a função readFile () estava dentro da função readFiles (). Isso causou problemas de escopo assíncrono.

    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

apenas gostaria de adicionar. se alguém estiver adicionando uma função que atualize caixas de seleção para um ouvinte de evento, você precisará usar em event.targetvez de thisatualizar as caixas de seleção.

Eu tenho uma abordagem muito simplista. Isso pode funcionar para os outros, pois me ajudou. É ... Quando você está tendo vários elementos / variáveis ​​atribuídos a uma mesma função e deseja passar a referência, a solução mais simples é ...

function Name()
{

this.methodName = "Value"

}

É isso aí. Funcionou para mim. Tão simples.

Outra alternativa, talvez não tão elegante quanto o uso de bind, mas é válida para eventos em um loop

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

Foi testado para extensões do google chrome e talvez o e.srcElement deva ser substituído pelo e.source em outros navegadores

Encontrei esta solução usando o comentário postado por Imatoria, mas não posso marcar como útil porque não tenho reputação suficiente: D

Esta solução pode ser boa para procurar

var some_other_function = someVar => function() {
}

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

ou vincular valores válidos também será bom