关于javascript：循环遍历数组并添加事件监听器“click”到每个


Loop through array and add event listener “click” to each

我正在尝试迭代一系列元素并为每个元素添加一个事件监听器。

填充数组：

1
var sliders = [].slice.call(document.getElementsByClassName("sliderControlLi"));

迭代数组：

1
2
3
4
5
sliders.forEach(function (i){
  addEventListener("click", function(){
    console.log("you clicked slider controler" + this.index +"!");
  });
});

但是使用这段代码，每当我点击任何一个滑块时，我都会获得多个console.log打印输出 - 一次为阵列中的每个滑块。

我找了类似的问题，但我仍然无法解决这个问题。

谢谢你的帮助！

相关讨论

你应该使用addEventListener()：

1
target.addEventListener(type, listener[, options]);

您还可以从forEach获取索引：

1
arr.forEach(function ( element_value,element_index ){ })

希望这可以帮助。

1
2
3
4
5
6
7
var sliders = [].slice.call(document.getElementsByClassName("sliderControlLi"));

sliders.forEach(function (element, index){
  element.addEventListener("click", function(){
    console.log("you clicked slider controler" +index +"!");
  });
});
1
2
3
4
slider 1
slider 2
slider 3
slider 4

你应该使用

1
2
EventTarget.addEventListener(...)
^^^^^^^^^^^^

所以在你的情况下

1
2
3
sliders.forEach(function (elem){
    elem.addEventListener(...);
});