javascript - 遍历数组并向每个数组添加事件监听器 "click"

Question

我正在尝试遍历一组元素并为每个元素添加一个事件监听器。

填充数组:

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

遍历数组:

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

但是使用这段代码，每当我点击任何 slider 时，我都会得到多个 console.log 打印输出 - 数组中的每个 slider 一次。

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

感谢您的帮助!

Answer 1

你应该使用 addEventListener() 作为:

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

您还可以从 forEach 获取索引 :

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

希望这对您有所帮助。

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

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

<div class="sliderControlLi">slider 1</div>
<div class="sliderControlLi">slider 2</div>
<div class="sliderControlLi">slider 3</div>
<div class="sliderControlLi">slider 4</div>