使用for循環並傳遞不同的參數將事件偵聽器添加到多個元素

Question

<div id="mydiv0"></div>
<div id="mydiv1"></div>
<div id="mydiv2"></div>


var myArray = [
  document.getElementById("mydiv0"),
  document.getElementById("mydiv1"),
  document.getElementById("mydiv2")
];

function myFunction(x){
  alert("my number is " + x);
}

for(var i = 0; i < myArray.length; i++){
  myArray[i].addEventListener("click", function(){myFunction(i);});
}

我想將事件偵聽器附加到myArray中的每個元素。 單擊時，將顯示一條警告消息，分別顯示mydiv0，mydiv1和mydiv2的數字0、1和2。 如上例所示，我嘗試使用for循環，但是無論我單擊哪個div，都會收到“我的號碼為3”的消息。 有沒有辦法將變量i的不同值作為myFunction的參數傳遞？

Answer 1

您可以簡單地在循環中使用let而不是var聲明變量，以創建塊作用域局部變量。

 var myArray = [ document.getElementById("mydiv0"), document.getElementById("mydiv1"), document.getElementById("mydiv2") ]; function myFunction(x){ alert("my number is " + x); } for(let i = 0; i < myArray.length; i++){ myArray[i].addEventListener("click", function(){myFunction(i);}); } 

 <div id="mydiv0">Div 0</div> <div id="mydiv1">Div 1</div> <div id="mydiv2">Div 2</div> 

Answer 2

您必須為點擊回調創建一個隔離范圍。

for(var i = 0; i < myArray.length; i++){
  (function(i){
    myArray[i].addEventListener("click", function(){myFunction(i);});
  })(i);
}

Answer 3

使用bind ：

 var myArray = [ document.getElementById("mydiv0"), document.getElementById("mydiv1"), document.getElementById("mydiv2") ]; function myFunction(x){ alert("my number is " + x); } for(var i = 0; i < myArray.length; i++){ myArray[i].addEventListener("click", myFunction.bind(null, i)); } 

 div { height: 20px; width: 200px; border: 1px solid black; } 

 <div id="mydiv0"></div> <div id="mydiv1"></div> <div id="mydiv2"></div> 

Answer 4

另外，您可以如下使用data屬性。

<div id="mydiv0" data-value="1"></div>
<div id="mydiv1" data-value="2"></div>
<div id="mydiv2" data-value="3"></div>

for(var i = 0; i < myArray.length; i++){
    myArray[i].addEventListener("click",  function() {
        myFunction(this.getAttribute('data-value'));
    });
}

Answer 5

只需使用“ let”而不是“ var”，如下所示：

for(let i = 0; i < myArray.length; i++){
    myArray[i].addEventListener("click", function(){myFunction(i);});
}

'let'允許您聲明變量，其作用域僅限於使用它的塊，語句或表達式。 這與'var'關鍵字不同，該關鍵字在全局范圍內或整個函數本地定義變量，而與塊范圍無關。