addEventListener 使用 for 循环和传递值

Question

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

如果我通过为每个实例定义 boxa 和 boxb 来手动添加侦听器，它就可以工作。我想这是 addEvent for-loop 没有按我希望的方式工作。也许我完全使用了错误的方法。

使用 class="container" 中的 4 个的示例 容器 4 上的触发器按预期方式工作。 在容器 4 上触发容器 1、2、3 触发事件，但前提是触发器已被激活。

// Function to run on click:
function makeItHappen(elem, elem2) {
  var el = document.getElementById(elem);
  el.style.backgroundColor = "red";
  var el2 = document.getElementById(elem2);
  el2.style.backgroundColor = "blue";
}

// Autoloading function to add the listeners:
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);
}

<div class="container">
  <div class="one" id="box1">
    <p class="triggerClass">some text</p>
  </div>
  <div class="two" id="box2">
    <p class="triggerClass">some text</p>
  </div>
</div>

<div class="container">
  <div class="one" id="box3">
    <p class="triggerClass">some text</p>
  </div>
  <div class="two" id="box4">
    <p class="triggerClass">some text</p>
  </div>
</div>

Answer 1

关闭！ :D

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

// Function to run on click:
function makeItHappen(elem, elem2) {
    var el = document.getElementById(elem);
    el.style.backgroundColor = "red";
    var el2 = document.getElementById(elem2);
    el2.style.backgroundColor = "blue";
}

// Autoloading function to add the listeners:
var elem = document.getElementsByClassName("triggerClass");

for (var i = 0; i < elem.length; i += 2) {
    (function () {
        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);
    }()); // immediate invocation
}

<div class="container">
  <div class="one" id="box1">
    <p class="triggerClass">some text</p>
  </div>
  <div class="two" id="box2">
    <p class="triggerClass">some text</p>
  </div>
</div>

<div class="container">
  <div class="one" id="box3">
    <p class="triggerClass">some text</p>
  </div>
  <div class="two" id="box4">
    <p class="triggerClass">some text</p>
  </div>
</div>

---

为什么会修复它？

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

实际上是非严格的 JavaScript。是这样解释的：

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

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

由于variable hoisting，var 声明被移到了作用域的顶部。由于 JavaScript 没有块作用域（for、if、while 等），它们被移动到函数的顶部。 更新： 从 ES6 开始，您可以使用 let 来获取块作用域变量。

当您的代码运行时，会发生以下情况：在for 循环中，您添加点击回调并分配boxa，但其值在下一次迭代中被覆盖。当点击事件触发回调时，boxa 的值总是列表中的最后一个元素。

使用闭包（关闭boxa、boxb 等的值）将值绑定到点击处理程序的范围。

---

JSLint 或JSHint 等代码分析工具将能够捕获此类可疑代码。如果您正在编写大量代码，那么花时间学习如何使用这些工具是值得的。有些 IDE 内置了它们。

Answer 2

你可以使用函数绑定。你不需要使用闭包。见下文：

之前：

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

Answer 3

这是因为闭包。

看看这个：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures#Creating_closures_in_loops_A_common_mistake

示例代码和你的代码本质上是一样的，对于不知道“闭包”的人来说这是一个常见的错误。

简单地说，当您在addEvents() 中创建处理函数时，它不仅会从addEvents() 的环境中访问变量i，而且还会“记住”i。

因为你的处理程序“记住”了i，所以变量i在addEvents()被执行后不会消失。

因此，当调用处理程序时，它将使用 i，但变量 i 现在在 for 循环之后为 3。

Answer 4

前段时间我也遇到过这个问题。 我通过在循环外使用“添加”函数来分配事件来解决它，并且效果很好。

您的脚本应该如下所示。

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;

//- edit ---------------------------|
    adds(boxa, boxb);
  }
}
//- adds function ----|
function adds(obj1, obj2){
  obj1.addEventListener("click", function(){makeItHappen(obj1, obj2);}, false);
  obj2.addEventListener("click", function(){makeItHappen(obj1, obj2);}, false);
}
//- end edit -----------------------|

function makeItHappen(elem, elem2){
  var el = document.getElementById(elem);
  el.style.transform = "flip it";
  var el2 = document.getElementById(elem2);
  el2.style.transform = "flip it";
}

Answer 5

您面临function(){makeItHappen(boxa,boxb);} boxa 和 boxb 引用的范围/关闭问题，然后总是最后一个元素。

解决问题：

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

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