addEventListener使用for循环并传递值 [英] addEventListener using for loop and passing values
问题描述
我尝试使用for循环将事件监听器添加到多个对象，但是最后所有的监听器都以同一个对象为目标 - >最后一个。
如果我通过为每个实例定义boxa和boxb来手动添加侦听器，它将起作用。我想这是addEvent for循环，这是不是我希望的方式工作。也许我完全使用了错误的方法。
使用class =container中的4的示例
容器4上的触发器按其应有的方式工作。
在容器4触发容器1,2,3触发器事件，但只有当触发器已经被激活时。
函数在点击运行：
p> 函数makeItHappen（elem，elem2）{
var el = document.getElementById（elem）;
el.style.transform =翻转;
var el2 = document.getElementById（elem2）;
el2.style.transform =翻转;
自动加载功能添加监听器：
function addEvents（）{
var elem = document.getElementsByClassName（triggerClass）; （var i = 0; i< elem.length; i + = 2）{
var k = i + 1;
;
var boxa = elem [i] .parentNode.id;
var boxb = elem [k] .parentNode.id;
$ b elem [i] .addEventListener（click，function（）{makeItHappen（boxa，boxb）;}，false）;
elem [k] .addEventListener（click，function（）{makeItHappen（boxb，boxa）;}，false）;
$ p $ HTML
< div class =container>
< div class =oneid =box1>
< p class =triggerClass>一些文字< / p>
< / div>
< div class =twoid =box2>
< p class =triggerClass>一些文字< / p>
< / div>
< / div>
< div class =container>
< div class =oneid =box3>
< p class =triggerClass>一些文字< / p>
< / div>
< div class =twoid =box4>
< p class =triggerClass>一些文字< / p>
< / div>
< / div>
解决方案闭包！ ：D
这个固定的代码按照你的意图工作：
for （var i = 0; i （function（）{
var k = i + 1;
var boxa = elem [i] .parentNode.id;
var boxb = elem [k] .parentNode.id;
$ b $ elem [i] .addEventListener（click，function（）{makeItHappen（boxa，boxb） ;}，false）;
elem [k] .addEventListener（click，function（）{makeItHappen（boxb，boxa）;}，false）;
}（））; //立即调用
$ $ $
$ b $ h
$ b $ h $> （$ i = 0; i< elem.length; i + = 2）{$ b
$ b var k = i + 1;
var boxa = elem [i] .parentNode.id;
var boxb = elem [k] .parentNode.id;
$ b 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 k = i + 1;
boxa = elem [i] .parentNode.id;
boxb = elem [k] .parentNode.id;
$ b elem [i] .addEventListener（click，function（）{makeItHappen（boxa，boxb）;}，false）;
elem [k] .addEventListener（click，function（）{makeItHappen（boxb，boxa）;}，false）;
由于变量提升，将 var 声明移动到范围。由于JavaScript没有块范围（为， if ， while 等）他们被移动到功能的顶部。 更新：截至ES6，您可以使用 让 来获得块范围的变量。
当你的代码运行下面的时候：为循环添加单击回调函数，并为 boxa 赋值，但是在下一次迭代中它的值被覆盖。当点击事件触发回调运行时， boxa 的值始终是列表中的最后一个元素。
使用闭包（关闭 boxa ， boxb 等等的值）代码分析工具，如 JSLint 或 JSHint 将能够捕获像这样的可疑代码。如果你写了很多代码，花时间学习如何使用这些工具是值得的。一些IDE有内置的。
I'm trying to add event listener to multiple objects using a for loop, but end up with all listeners targeting the same object --> the last one.
If I add the listeners manually by defining boxa and boxb for every instance, it works. I guess it's the addEvent for-loop that's not working the way I hoped for. Maybe I use the wrong approach altogether.
Example using 4 of the class="container"
Trigger on container 4 works the way it´s supposed to.
Trigger on container 1,2,3 trigger event on container 4, but only if trigger has already been activated.
Function to run on click:
function makeItHappen(elem, elem2){
var el = document.getElementById(elem);
el.style.transform = "flip it";
var el2 = document.getElementById(elem2);
el2.style.transform = "flip it";
}
Autoloading function to add the listeners:
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);
}
}
HTML code
<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>
解决方案 Closures! :D
This fixed code works as you intended:
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
}
Why does this fix it?
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);
}
Is actually non-strict JavaScript. It's interpretted like this:
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);
}
Because of variable hoisting, the var declarations get moved to the top of the scope. Since JavaScript doesn't have block scope (for, if, while etc.) they get moved to the top of the function. Update: as of ES6 you can use let to get block scoped variables.
When your code runs the following happens: in the for loop you add the click callbacks and you assign boxa, but its value gets overwritten in the next iteration. When the click event fires the callback runs and the value of boxa is always the last element in the list.
Using a closure (closing the values of boxa, boxb etc) you bind the value to the scope of the click handler.
Code analysis tools such JSLint or JSHint will be able to catch suspicious code like this. If you're writing a lot of code it's worthwhile to take the time to learn how to use these tools. Some IDEs have them built-in.
这篇关于addEventListener使用for循环并传递值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
