Цикл через массив и добавить прослушиватель событий "click" к каждому

Я пытаюсь перебрать массив элементов и добавить прослушиватель событий к каждому из них.

Заполнение массива: 

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

Перебираем массив: 

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

Но с этим кодом, всякий раз, когда я нажимаю на любой из ползунков, я получаю несколько консолей.распечатки журналов-по одному разу для каждого слайдера в массиве.

Я искал подобные проблемы, но до сих пор не могу решить эту.

Спасибо за любую помощь!

2 2
javascript arrays onclicklistener addeventlistener

2 ответа:

Вы должны использовать 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>
7

Вы должны использовать 

EventTarget.addEventListener(...)
^^^^^^^^^^^^

Так что в вашем случае 

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