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

情况有点像 -

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

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

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是一种面向原型的语言,请记住!

---

这是正确的答案,因为它让我们在'removeEventListener'函数之后使用.

---

不应该是`evt.currentTarget.myParam`？如果'someInput'中有另一个元素,`evt.target`可以引用内部元素.(https://jsfiddle.net/qp5zguay/1/)

---

应该被选为接受的答案 - 这是最干净最好的方式!

---

我最喜欢这个答案!应该是正确的答案.

2> Sergey Ilins..：

---

你写的代码绝对没有错.双方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);

---

这在for循环中不起作用.我总是得到最新的价值,而不是那个属于那次迭代的价值.有解决方案吗

---

@Morfidon:在循环中,someVar的值不是添加侦听器时的值,而是执行侦听器时的值.执行监听器时,循环已经结束,因此someVar的值将是循环结束时的值.

---

有谁知道为什么它不能在循环中工作？这种行为的原因是什么？

---

@iMatoria我刚刚发现使用`.bind()`方法创建一个`bound函数`将解决循环问题https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/功能/绑定

---

@Morfidon因为带有全局变量的函数在javascript中充当[闭包](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures),这意味着它们会记住其词法范围之外的环境.如果您只是在相同的环境中创建不同的功能,那么它们将引用相同的环境.

---

这不是正确的答案因为它不允许我们使用'removeEventListener'函数之后.

3> Brian Moore..：

---

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

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

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

4> Oleksandr Tk..：

---

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

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

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

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

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.

---

很高兴遇到这个提到咖喱功能的答案.你会如何删除事件监听器？

---

很高兴看到好的术语.您应该能够通过命名curried函数来删除事件侦听器.我会建议编辑.

6> 小智..：

---

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

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

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

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

7> ahuigo..：

---

你可以通过一个名为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)

8> Thevs..：

---

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

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

并newVar改为使用.

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

var someVar = some_function(someVar);

9> Hello World..：

---

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

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

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

false);

---

这是最好的方法.丑陋但在循环内有效,因为通过向匿名函数发送参数将捕获var.

10> 小智..：

---

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

11> kta..：

---

使用

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

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