关于javascript：多个addEventListener不存储唯一的回调


Multiple addEventListener not storing unique callbacks

本问题已经有最佳答案，请猛点这里访问。

超级困和编码，不是一个很好的组合，如果我是一名外科医生，我的病人很久以前就已经去世了！ 所以这是我在这个网站上的第一个问题：

我的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
    <label>
        <input
            type="checkbox"
            class="checkbox-toppings"
            id="topp1010"
            value=""
            data-price="300"
        >
        <span class="toppings-text">pepperoni</span>
    </label>



    <label>
        <input
            type="checkbox"
            class="checkbox-toppings"
            id="topp1020"
            value=""
            data-price="300"
        >
        <span class="toppings-text">ham</span>
    </label>
 

<!-- and 32 more items like this -->
相关讨论

使用.bind为每个回调创建不同的函数。

1
2
3
4
5
6
7
8
9
10
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);
}
相关讨论

欢迎来到Closures的概念。

处理程序正在捕获或关闭i的值，因此只会分配i的最后一个值。

更改

1
 function(){cAction(i);}

至

1
2
3
(function(temp){return function(){
  cAction(temp);
}}(i))