为什么循环将最后一个索引元素的引用分配给？ [复制]

Question

我想为我的所有标签添加一个事件侦听器，每个标签都传递一个对自身的引用当触发事件时作为参数。这是我写的函数：

function validateDigitsFeature()
{
    //  Add the event listeners to input tags
    //      Get the array of input tags
    var inputTags = document.getElementsByClassName('validateInput');
    var tagId;
    //      Loop through them, adding the onkeypress event listener to each one
    for (var i = 0; i < inputTags.length; i++)
    {
        //  Give each input element an id
        tagId = inputTags[i].id = 'input_id_' + i;
        inputTags[i].addEventListener('keyup', function(){isNumberOrDot(event, tagId);}, false);
    }
}

该函数基本上应该做以下事情：

1. 将具有指定类名的所有输入标签存储在一个数组中
2. 循环遍历数组，为每个标签添加一个 id 和
3. 使用isNumberOrDot(event, tagId) 处理程序添加onkeyup 事件侦听器。

问题

添加了 onkeyup 事件，但每个事件的处理程序总是引用数组最后一个元素的tagId。

问题

代码/逻辑有什么问题？又该如何解决？

注意

当然，这个问题与循环中的 JavaScript 闭包有关，虽然这个问题可能有更一般的答案，但它特定于正在使用的事件侦听器。对于更高级的开发人员，可能很容易将通用解决方案应用于此问题。但对我来说，其他解决方案仍然没有提供完整的解释，甚至没有奏效。

提前谢谢你。

Answer 1

因为实际事件发生在您的 for 循环已经完成运行之后的某个时间，因此它的索引处于最后一个值，并且您的函数中的任何局部变量（如 tagId）也处于它们的最后一个值。您需要创建某种闭包，为​​每个事件处理程序唯一地保留 i 或 tagId 的值，以便它们每个都可以访问自己的值。

有几种不同的方法可以做到这一点，但都涉及将i 值传递给每个事件处理程序的函数。

这是一个使用 IIFE（立即调用函数表达式）的例子：

function validateDigitsFeature()
{
    //  Add the event listeners to input tags
    //      Get the array of input tags
    var inputTags = document.getElementsByClassName('validateInput');
    //      Loop through them, adding the onkeypress event listener to each one
    for (var i = 0; i < inputTags.length; i++)
    {
        //  Give each input element an id
        (function() {
            // creates a unique function context for each event handler so the
            // value of tagId is unique for each event handler
            var tagId = inputTags[i].id = 'input_id_' + i;
            inputTags[i].addEventListener('keyup', function(){isNumberOrDot(event, tagId);}, false);
        })();
    }
}

更常见的方法是将for 循环中的索引传递到闭包中，并在事件处理程序中基于它进行任何计算（尽管任何一种方法都可以正常工作），如下所示：

function validateDigitsFeature()
{
    //  Add the event listeners to input tags
    //      Get the array of input tags
    var inputTags = document.getElementsByClassName('validateInput');
    //      Loop through them, adding the onkeypress event listener to each one
    for (var i = 0; i < inputTags.length; i++)
    {
        //  Give each input element an id
        (function(index) {
            // passes the `for` loop index into a function closure
            // so it is uniquely preserved for each event handler
            inputTags[index].addEventListener('keyup', function(){
                isNumberOrDot(event, inputTags[index].id = 'input_id_' + index);
            }, false);
        })(i);
    }
}