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

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

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

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
}

Answer 3

有很多可能性。No1 将为它创建一个闭包。你也可以使用bind().

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