为什么我的事件处理程序从动态创建的元素中的最后一个循环迭代接收值？

事件处理程序和闭包中的变量引用

在此场景中，您将在循环中使用事件处理程序动态创建元素。最初，目的是根据循环迭代将不同的值传递给事件处理程序。但是，事件处理程序似乎正在接收来自上次循环迭代的值，这表明存在范围问题。

事实上，代码的问题在于在循环中使用匿名函数作为事件处理程序。正如您所怀疑的那样，事件处理函数是引用循环内变量的闭包。当事件触发时，循环已完成，引用的变量保存上次迭代中分配的最终值。

实现闭包

解决此问题问题并将预期值正确传递给事件处理程序，您需要实现一个在循环执行时捕获变量的闭包。通过这样做，每个事件处理程序将拥有对其所需的特定值的自己的引用。

以下修改后的代码通过将事件处理程序函数包装在另一个立即调用的匿名函数（也称为IIFE，即立即调用函数表达式）：

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);
}

在此修改后的代码中，内部 IIFE 返回实际的事件处理函数，同时接收传入的必要参数（select、callid、anotherid）从循环中。通过在循环执行时捕获这些值，您可以有效地为每个事件处理程序创建一个单独的作用域。

此技术可确保每个事件处理程序在事件发生时都有自己对所需值的引用，从而解决值引用不当的问题。

以上是为什么我的事件处理程序从动态创建的元素中的最后一个循环迭代接收值？的详细内容。更多信息请关注PHP中文网其他相关文章！