javascript - 如何正确地将循环中的参数传递给多个事件处理程序？

Question

可能重复：
循环内的 Javascript 闭包 - 简单的实际示例

我使用 JS 将事件处理程序添加到我的网站上的多个 href，如下所示：

function addButtonListener(){
  var buttons = document.getElementsByClassName("selLink");
  for (var i = 0; i < buttons.length; i++)
  {
      button.addEventListener('click',function() { addTosel(i); },true);
    }
  }
}

但不幸的是 addTosel 是通过最后一个 i 而不是循环中的 i 。如何将 i 相应地传递给此时正在处理的对象？

Answer 1

您需要创建一个闭包：

function addButtonListener(){
    var buttons = document.getElementsByClassName("selLink");

    for (var i = 0; i < buttons.length; i++) {

        button.addEventListener('click', function(index) { 
            return function () {
                addTosel(index);
            };
        }(i), true);
    }
}

这样，处理程序的范围就绑定到i.

有关此主题的更多信息，请参阅本文。

Answer 2

您需要在i声明变量时将其绑定到函数。像这样

for (var i = 0; i < buttons.length; i++) {
  button.addEventListener('click',(function() { addTosel(this); }).bind(i) ,true);
}

注意：我只是从内存中编写代码，因此它可能并不完美，但它是您需要的解决方案，以供参考正确的方法，即使用跨浏览器垫片等查看：

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind

Answer 3

如果您要采用这种.bind方法，请这样做。

for (var i = 0; i < buttons.length; i++) {
   button.addEventListener('click', addTosel.bind(null, i), true);
}

这会创建一个以nullbound 作为this值的新函数，因为您的函数似乎不需要它，并且当前ibound 作为第一个参数。

或者制作自己的活页夹功能

var _slice = Array.prototype.slice;
function _binder(func, ctx /*, arg1, argn */) {
    var bound_args = _slice.call(arguments, 2);
    return function() {
        return func.apply(ctx, bound_args.concat(_slice.call(arguments)));
    }
}

然后这样做。

for (var i = 0; i < buttons.length; i++) {
   button.addEventListener('click', _binder(addTosel, null, i), true);
}