循環通過數組並添加事件監聽器「單擊」到每個

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(...); 
});