為什麼 JavaScript 中基於循環的點擊處理程序有時會顯示意外的值？

在循環中處理點擊事件：了解閉包陷阱

將點擊處理程序分配給具有循環的多個元素時，必須注意JavaScript 的閉包機制。一個常見的錯誤是在循環中建立閉包而不使用回調函數。這可能會導致意外的行為。

在提供的程式碼片段中：

$(document).ready(function(){
  for(var i = 0; i < 20; i++) {
    $('#question' + i).click( function(){
      alert('you clicked ' + i);
    });
  }
});

預期的行為是按一下 #mydiv3 將顯示「您點擊了 3」。但是，程式碼錯誤地使用了 i 變量，它是循環中的全域變數。因此，i 變數的最終值為 20，從而導致錯誤的警報訊息。

在循環中分配點擊處理程序的正確方法是使用回調函數。這些函數可以為 i 變數建立一個新的作用域，確保迴圈的每次迭代都有自己的 i 實例。

function createCallback(i){
  return function(){
    alert('you clicked ' + i);
  }
}

$(document).ready(function(){
  for(var i = 0; i < 20; i++) {
    $('#question' + i).click(createCallback(i));
  }
});

如果使用ES6，另一個現代解決方案是利用let 關鍵字為循環的每次迭代創建一個局部變數：

for(let i = 0; i < 20; i++) {
  $('#question' + i).click( function(){
    alert('you clicked ' + i);
  });
}

這種方法更乾淨、更容易理解。它確保每個點擊處理程序都有自己的 i 變量，消除閉包陷阱並確保在循環中處理點擊事件時的正確行為。

以上是為什麼 JavaScript 中基於循環的點擊處理程序有時會顯示意外的值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！