Прокрутите массив и добавьте прослушиватель событий «нажмите» для каждого

Question

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

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

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

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

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

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

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

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

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>

Answer 2

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

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

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

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