不存储唯一回调的多个addEventListener
不存储唯一回调的多个addEventListener
提问于 2015-11-23 19:01:44
超级困倦和编码，不是一个很好的组合，如果我是一名外科医生，我的病人早就去世了！下面是我在这个网站上的第一个问题：
我的代码：
function cAction(manipulatedElement) {
console.log(manipulatedElement); //test parameter
// some manipulation code...
}
var cboxes = document.getElementsByClassName('checkbox-toppings');
l = cboxes.length;
for(i = 0; i < l; i++) {
cboxes[i].addEventListener('change',
function() { cAction(i); },
false
);
}当我选中/取消复选框时，我只得到写入控制台的"34“(最后一个复选框)，无论哪个复选框被选中，结果如何？每个事件侦听器的回调不应该记住索引号"i“吗？
希望有人能帮我这个忙。
从项目中粘贴的一些HTML：
<div class="toppings col-xs-6 col-sm-4 col-md-3">
<div class="checkbox"><label>
<input
type="checkbox"
class="checkbox-toppings"
id="topp1010"
value=""
data-price="300"
>
<span class="toppings-text">pepperoni</span>
</label></div>
</div>
<div class="toppings col-xs-6 col-sm-4 col-md-3">
<div class="checkbox"><label>
<input
type="checkbox"
class="checkbox-toppings"
id="topp1020"
value=""
data-price="300"
>
<span class="toppings-text">ham</span>
</label></div>
</div>
<!-- and 32 more items like this -->回答 2
Stack Overflow用户
回答已采纳
发布于 2015-11-23 19:06:54
使用.bind为每个回调创建不同的函数。
function cAction(manipulatedElement) {
console.log(manipulatedElement); //test parameter
// some manipulation code...
}
var cboxes = document.getElementsByClassName('checkbox-toppings');
l = cboxes.length;
for(i=0; i<l; i++) {
cboxes[i].addEventListener('change', cAction.bind(cboxes[i], i), false);
}Stack Overflow用户
发布于 2015-11-23 19:03:53
欢迎来到Closures的概念。
处理程序正在捕获或关闭i的值，因此只分配i的最后一个值。
变化
function(){cAction(i);}至
(function(temp){return function(){
cAction(temp);
}}(i))页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33884700
复制
相似问题
addEventListener(“事件”，回调)与addEventListener(“事件”，函数(){回调() })
Javascript addEventListener回调逻辑
带有addeventlistener的回调函数
addEventListener :如何限制回调函数？
使用addEventListener理解javascript回调
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
