將參數傳遞給EventListener函數

Question

我正在構建一個簡單的計算器應用程序。 我正在嘗試完成三件事：

1. 將事件偵聽器分配給按鈕。
2. 單擊該按鈕時，觸發一個事件。

3. 使用eventListener函數顯示單擊按鈕的值。

    for (i = 0; i < btn.length; i++) { var btnVal = btn[i].value; btn[i].addEventListener("click", function() { displayNumber(btnVal) }, false); } function displayNumber(param) { displayedNum.innerHTML = param; } 

傳遞給事件偵聽器函數時，似乎無法訪問btnVal。

Answer 1

作業不會那樣工作。 而是使用目標的值

for (i = 0; i < btn.length; i++) {
    btn[i].addEventListener("click", function(e) {
     displayNumber(e.target.value) 
    }, false);
}

Answer 2

您不能在事件內部使用btnVal。

它應該看起來像這樣

for (i = 0; i < btn.length; i++) {
 btn[i].addEventListener("click", function(event) {
    var clickedButton = event.target || event.srcElement;
    console.log(clickedButton.value)
 }, false);
}

Answer 3

在循環內定義事件監聽器（或其他異步事物）非常棘手。 您可能會認為您正在創建幾個不同的btnVal變量，每次在循環中都創建一個，但是btnVal並非如此。 該var btnVal被吊起並重新使用，因此您的代碼最終表現如下：

var btnVal;
for (i = 0; i < btn.length; i++) {
   btnVal = btn[i].value;
   btn[i].addEventListener("click", function() { displayNumber(btnVal) }, false);
}

因此，所有事件偵聽器都與同一個變量進行交互，並且當最終單擊它們時，他們將僅看到分配給btnVal的最后一個值，該值應為btn[btn.length -1].value 。 數組前面的所有值都將丟失。

有幾種方法可以解決此問題：

1）您可以在事件結束時將其從元素本身中拉出，而不是依賴於閉包變量。

for (i = 0; i < btn.length; i++) {
  btn[i].addEventListener("click", function (event) {
    displayNumber(event.target.value);
  });   
}

2）將事件偵聽器的創建移到一個函數中，並傳入btnVal。由於它現在是一個函數參數，因此它將獲得一個新的綁定。

for (i = 0; i < btn.length; i++) {
    createListener(btn[i], btn[i].value);
}

function createListener(element, val) {
    element.addEventListener("click", function () { displayNumber(val) }, false);
}

3）您可以使用IIFE進行內聯。

for (i = 0; i < btn.length; i++) {
   (function (button) {
       button.addEventListener("click", function () { displayNumber(button.value) }, false);
   })(btn[i]);
}

編輯：添加選項4

4）如果可以使用ES2015，請使用let 。 Let具有塊作用域，並且每次通過循環都會獲得一個新的綁定

for (i = 0; i < btn.length; i++) {
   let btnVal = btn[i].value;
   btn[i].addEventListener("click", function() { displayNumber(btnVal) }, false);
}