Javascript 使用for循环和传递值的addEventListener

我试图使用for循环将事件侦听器添加到多个对象，但最终所有侦听器都指向同一个对象-->最后一个对象

如果我通过为每个实例定义boxa和boxb来手动添加侦听器，它就会工作。我猜是循环的加法器没有按我希望的方式工作。也许我完全用错了方法

使用class=“container”中的4的示例 容器4上的触发器按预期的方式工作。 容器1,2,3上的触发器容器4上的触发器事件，但仅当触发器已激活时

//要在单击时运行的函数：
函数makeItHappen（elem，elem2）{
var el=document.getElementById（elem）；
el.style.backgroundColor=“红色”；
var el2=document.getElementById（elem2）；
el2.style.backgroundColor=“蓝色”；
}
//用于添加侦听器的自动加载功能：
var elem=document.getElementsByClassName（“triggerClass”）；
对于（变量i=0；i

一些文本
一些文本
一些文本
一些文本

闭包！：D

此固定代码按照您的预期工作：

//要在单击时运行的函数：
函数makeItHappen（elem，elem2）{
var el=document.getElementById（elem）；
el.style.backgroundColor=“红色”；
var el2=document.getElementById（elem2）；
el2.style.backgroundColor=“蓝色”；
}
//用于添加侦听器的自动加载功能：
var elem=document.getElementsByClassName（“triggerClass”）；
对于（变量i=0；i

一些文本
一些文本
一些文本
一些文本

您将面临作用域/闭包问题，因为

函数（）{makeItHappen（boxa，boxb）；}

boxa和boxb引用始终是最后一个元素

要解决这个问题：

function makeItHappenDelegate(a, b) {
  return function(){
      makeItHappen(a, b)
  }
}

// ...
 elem[i].addEventListener("click", makeItHappenDelegate(boxa,boxb), false);

---

我刚才也有这个问题。 我通过在循环外使用一个“adds”函数来分配事件来解决这个问题，它工作得非常好

您的脚本应该如下所示

函数addEvents（）{
var elem=document.getElementsByClassName（“triggerClass”）；
对于（变量i=0；i}

这是因为闭包

看看这个：

示例代码和您的代码本质上是相同的，对于那些不知道“闭包”的人来说，这是一个常见的错误

简单地说，当您在

addEvents（）

中创建处理程序函数时，它不仅从

addEvents（）

的环境中访问变量

i

，而且还“记住”

i

因为处理程序“记住”

i

，所以执行

addEvents（）

后变量

i

不会消失

---

因此，当调用处理程序时，它将使用

i

，但变量

i

现在在for循环之后是3。

您可以使用函数绑定。您不需要使用闭包。请参阅以下内容：

之前：

function addEvents(){
   var elem = document.getElementsByClassName("triggerClass");

   for(var i=0; i < elem.length; i+=2){
      var k = i + 1;
      var boxa = elem[i].parentNode.id;
      var boxb = elem[k].parentNode.id;

      elem[i].addEventListener("click", function(){makeItHappen(boxa,boxb);}, false);
      elem[k].addEventListener("click", function(){makeItHappen(boxb,boxa);}, false);
   }
}

function addEvents(){
   var elem = document.getElementsByClassName("triggerClass");

   for(var i=0; i < elem.length; i+=2){
        var k = i + 1;
      var boxa = elem[i].parentNode.id;
      var boxb = elem[k].parentNode.id;
      elem[i].addEventListener("click", makeItHappen.bind(this, boxa, boxb), false);
      elem[k].addEventListener("click", makeItHappen.bind(this, boxa, boxb), false);
   }
}

函数addEvents（）{
var elem=document.getElementsByClassName（“triggerClass”）；
对于（变量i=0；i

之后：

function addEvents(){
   var elem = document.getElementsByClassName("triggerClass");

   for(var i=0; i < elem.length; i+=2){
      var k = i + 1;
      var boxa = elem[i].parentNode.id;
      var boxb = elem[k].parentNode.id;

      elem[i].addEventListener("click", function(){makeItHappen(boxa,boxb);}, false);
      elem[k].addEventListener("click", function(){makeItHappen(boxb,boxa);}, false);
   }
}

function addEvents(){
   var elem = document.getElementsByClassName("triggerClass");

   for(var i=0; i < elem.length; i+=2){
        var k = i + 1;
      var boxa = elem[i].parentNode.id;
      var boxb = elem[k].parentNode.id;
      elem[i].addEventListener("click", makeItHappen.bind(this, boxa, boxb), false);
      elem[k].addEventListener("click", makeItHappen.bind(this, boxa, boxb), false);
   }
}

函数addEvents（）{
var elem=document.getElementsByClassName（“triggerClass”）；
对于（变量i=0；i

这是因为闭包：D…但是为什么不在父元素上添加事件侦听器，而不是将其添加到每个子元素上呢？@musefan由于变量的存在，这就是问题所在。请看我的解释。应该

}（i，k））

是

}（i，k）

？实际上是无效的JavaScript。如果它是无效的，它将不会解析或执行。使用我向您展示的闭包，您确实获得了预期的行为：正确，但重要的是您正在循环中执行一个函数，这将创建一个新的作用域。@Wayne:任何一种方法都可以。就我个人而言，我觉得第一个更具可读性。@Felix potato，将措辞改为非严格@韦恩要么工作，但