![使用循环和传递值的addEventListener [重复]](http://www.mshxw.com/aiimages/31/398748.png "使用循环和传递值的addEventListener [重复]")
关闭！：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 > <div id="box1"> <p >some text</p> </div> <div id="box2"> <p >some text</p> </div></div><div > <div id="box3"> <p >some text</p> </div> <div id="box4"> <p >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);}由于变量提升，因此
var声明将移动到作用域的顶部。由于Javascript没有块作用域（
for，
if，
while等），他们无法移动到函数的顶部。
更新：
从ES6开始，您可以
let用来获取块范围的变量。
当您的代码运行时，会发生以下情况：在
for循环中添加click回调并分配
boxa，但是其值在下一次迭代中将被覆盖。当点击事件触发回调运行和的值
boxa是始终在列表的最后一个元素。
使用闭包（关闭的值
boxa，
boxb等等），将值绑定到点击处理程序的作用域。
