为什么 JavaScript 循环中的事件处理程序引用相同的变量？

在 JavaScript 循环中使用事件处理程序：使用闭包进行不同的事件处理

在 JavaScript 中，当使用 HTML 代码时，事件处理程序会发挥作用在用户与网页交互方面发挥着至关重要的作用。然而，当这些事件处理程序在循环中定义时，会出现一个常见的挑战，从而导致意外行为。

为了说明此问题，请考虑以下代码片段：

<code class="javascript">var blah = xmlres.getElementsByTagName('blah');
for(var i = 0; i < 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);
}

当 onchange 时 事件被触发元素，经验证据表明相同的值被传递给 onStatusChanged() 方法，无论特定的 是什么。触发事件的元素。这种行为源于 JavaScript 在定义事件处理程序时实现闭包的方式。

具体来说，在循环内，闭包 select.onchange = function() 引用变量 callid 和 anotherid，它们携带在循环的最后一次迭代。因此，当触发事件时，这些变量的值不是与特定相关联的值。

为了解决这个问题，可以实现一个闭包来捕获事件处理程序定义时的 select、callid 和 anotherid 的值。以下代码演示了这种方法：

<code class="javascript">var blah = xmlres.getElementsByTagName('blah');
for(var i = 0; i < 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);
}

登录后复制

总之，在 JavaScript 循环中定义事件处理程序时使用闭包对于确保事件处理程序函数接收所涉及变量的适当值至关重要。这种做法允许基于特定的

进行不同的事件处理。触发事件的元素。

以上是为什么 JavaScript 循环中的事件处理程序引用相同的变量？的详细内容。更多信息请关注PHP中文网其他相关文章！