如何将参数传递给addEventListener监听器函数？

Question

情况有点像 -

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

问题是someVar在侦听器函数内部的值是不可见的addEventListener,它可能被视为一个新变量.

Answer 1

为什么不从事件的target属性中获取参数？

例:

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

JavaScript是一种面向原型的语言,请记住!

Answer 2

你写的代码绝对没有错.双方some_function并someVar应访问的,以防他们在上下文的匿名可用

function() { some_function(someVar); } 

创建了.

检查警报是否为您提供了您一直在寻找的值,请确保它可以在匿名函数范围内访问(除非您有更多代码someVar在调用旁边的同一变量上运行addEventListener)

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

Answer 3

这个问题已经过时了,但我认为我会提供另一种使用ES5的.bind() - 替代后代.:)

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

请注意,你需要设置你的侦听器函数,第一个param作为你传递给bind的参数(你的另一个函数),第二个param现在是事件(而不是第一个,就像它本来的那样) .

Answer 4

你可以用'bind'绑定所有必要的参数:

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

通过这种方式,你将永远得到event,arg1传递,和其他的东西myPrettyHandler.

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

Answer 5

相当古老的问题,但今天我遇到了同样的问题.我发现最干净的解决方案是使用currying的概念.

代码:

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

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

通过命名curried函数,它允许您调用Object.removeEventListener以在稍后的执行时取消注册eventListener.

Answer 6

您可以通过将函数声明为变量来添加和删除带参数的eventlisteners.

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

newSrc是myaudio作为参数的方法 funcName是函数名变量

您可以删除侦听器 myaudio.removeEventListener('ended',func,false);

Answer 7

不错的单线替代品

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

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

 //some action...

}

Answer 8

你可以通过一个名为closure的javascript函数按值传递somevar(而不是通过引用):

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

或者您可以编写一个常见的包装函数,例如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'

这wrapEventCallback(func,var1,var2)就像:

func.bind(null, var1,var2)

Answer 9

一种简单的执行方法可能是这样的

    window.addEventListener('click', (e) => functionHandler(e, ...args));

对我有用。

Answer 10

someVar值只能在some_function()上下文中访问,而不能从侦听器访问.如果你想在监听器中使用它,你必须做以下事情:

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

并newVar改为使用.

另一种方法是返回someVar值some_function()以便在侦听器中进一步使用它(作为新的局部变量):

var someVar = some_function(someVar);

Answer 11

这是另一种方式(这个在for循环中工作):

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

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

false);

Answer 12

Function.prototype.bind（）是将目标函数绑定到特定作用域并有选择地this在目标函数内定义对象的方法。

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

或捕获某些词汇范围，例如在循环中：

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

最后，如果this目标函数中不需要该参数：

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

Answer 13

使用

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

如果你想将任何自定义值传递给这个匿名函数,那么最简单的方法就是

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

在我的项目中完美运作.希望这会有所帮助

Answer 14

一种方法是使用外部函数来执行此操作：

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

这种将匿名函数括在括号中并立即调用它的方法称为 IIFE （立即调用函数表达式）

您可以在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

如果我没有记错的话，使用调用函数bind实际上会创建一个由该bind方法返回的新函数。这会在以后给你带来问题，或者如果你想删除事件监听器，因为它基本上就像一个匿名函数：

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

所以请记住这一点。

如果您使用的是 ES6，您可以按照建议的方式进行操作，但会更简洁一些：

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

Answer 16

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

这就是我正确通过事件的方式。

Answer 17

2019 年，很多 api 发生了变化，最佳答案不再有效，没有修复 bug。

分享一些工作代码。

受到上述所有答案的启发。

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