為什麼 JavaScript 迴圈中的事件處理程序會引用相同的變數？

在JavaScript 循環中使用事件處理程序：使用閉包進行不同的事件處理

在JavaScript 中，當使用HTML 程式碼時，事件處理程序會發揮作用在使用者與網頁互動方面發揮著至關重要的作用。然而，當這些事件處理程序在循環中定義時，會出現一個常見的挑戰，從而導致意外行為。

為了說明此問題，請考慮以下程式碼片段：

<code class="javascript">var blah = xmlres.getElementsByTagName('blah');
for(var i = 0; i &lt; blah.length; i++) {
    var td = document.createElement('td');
    var select = document.createElement('select');
    select.setAttribute("...", "...");
    select.onchange = function() {
        onStatusChanged(select, callid, anotherid);
    };
    td.appendChild(select);
}</code>

當onchange 時 事件被觸發元素，經驗證據表明相同的值被傳遞給onStatusChanged() 方法，無論特定的 是什麼。觸發事件的元素。這種行為源自於 JavaScript 在定義事件處理程序時實作閉包的方式。

具體來說，在迴圈內，閉包 select.onchange = function() 引用變數 callid 和 anotherid，它們攜帶在迴圈的最後一個迭代。因此，當觸發事件時，這些變數的值不是與特定相關聯的值。

為了解決這個問題，可以實作一個閉包來捕捉事件處理程序定義時的 select、callid 和 anotherid 的值。以下程式碼示範了這種方法：

<code class="javascript">var blah = xmlres.getElementsByTagName('blah');
for(var i = 0; i &lt; blah.length; i++) {
    var td = document.createElement('td');
    var select = document.createElement('select');
    select.setAttribute("...", "...");
    select.onchange = function(s,c,a)
    {
        return function()
        {
            onStatusChanged(s,c,a);
        }
    }(select, callid, anotherid);
    td.appendChild(select);
}</code>

總之，在 JavaScript 迴圈中定義事件處理程序時使用閉包對於確保事件處理程序函數接收所涉及變數的適當值至關重要。這種做法允許基於特定的進行不同的事件處理。觸發事件的元素。

以上是為什麼 JavaScript 迴圈中的事件處理程序會引用相同的變數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！