Question

anItem.addEventListener("click", iRespond, false);

问题是，我需要传递iRespond参数，因为iRespond应该处理许多项目的点击，我需要一种区分项目的方法。

我该怎么办？

Answer 1

简单闭合：

var foo = "bar";
e.addEventListener('whee',function(evt){
  iRespond(evt,foo);
},false);

当一个简单的闭包不能做（因为你正在锁定一个正在改变的变量，比如在一个循环中），你需要在该值上创建一个新的闭包：

foo.addEventListener('bar',(function(jim){
  return function(evt){
    iRespond(evt,jim); // Surprise surprise, jim is available here!
  }
})(someValueToBeNamedJim), false);

例如：

var buttons = document.querySelectorAll('button');
for (var i=buttons.length;i--;)}
  buttons[i].addEventListener('click',(function(j){
    return function(){ alert("You clicked on button #"+j); };
  })(i),false);
}

您可以选择在函数内部和外部对变量命名相同而不会出现问题 - 例如。使用i代替j以上 - 但您可能会发现自己感到困惑。

Answer 2

有很多种可能性。 No1会为它创建一个闭包。您也可以使用bind()。

更好的解决方案可能是通过事件的target属性区分选项（每个项目），该属性也传递给侦听器。当您对许多项目仅使用一个处理程序时，这将变得非常优雅，例如将其添加到<ul>而不是每个<li>元素一个。然后选择要做的事情，例如目标元素的id或data-attributes。

Answer 3

似乎没有人提供最简单的解决方案。将您的其他函数调用放在这样的匿名函数中：

anItem.addEventListener("click", function() {
    iRespond(your arg here);
}, false);

或者，在许多情况下，您只需引用事件侦听器中的this指针即可查看调用的对象：

anItem.addEventListener("click", iRespond, false);

然后，在iRespond：

function iRespond() {
    // this points to the item that caused the event so you can 
    // determine which one you are processing and then act accordingly
    // For example, this.id is the id of the object
}

如何将参数传递给addEventListener中传递的侦听器函数？

3 个答案: