javascript使用for循环批量注册的事件不能正确获取索引值的解决方法

时间：2023-12-09

当使用 for 循环批量注册事件时，经常会遇到无法正确捕获循环变量 i 的问题。这是因为循环结束后，i 的值会变成循环内最后一个迭代的值。这个问题通常称为 JavaScript 的闭包问题。下面是一个简单的示例说明：

<!DOCTYPE html>
<html>
<head>
    <title>for循环注册事件示例</title>
</head>
<body>
    <!-- 5个按钮，点击后弹出对应的数字 -->
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    <script>
        var buttons = document.getElementsByTagName("button");
        for (var i = 0; i < buttons.length; i++) {
            buttons[i].addEventListener("click", function() {
                alert(i);
            });
        }
    </script>
</body>
</html>

当单击任何一个按钮时，弹出的结果都是 5，而不是按钮对应的数字。这是因为在事件处理程序函数内，变量 i 的值已经变成了循环结束后 i 的最终值 5。

要解决这个问题，需要在循环内部为每个按钮创建一个闭包。一个常见的方法是将循环变量的值传递给闭包的参数。这样，事件处理程序可以引用闭包参数，而不是循环变量 i。以下是解决方法的示例：

<!DOCTYPE html>
<html>
<head>
    <title>for循环注册事件解决方法示例</title>
</head>
<body>
    <!-- 5个按钮，点击后弹出对应的数字 -->
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    <script>
        var buttons = document.getElementsByTagName("button");
        for (var i = 0; i < buttons.length; i++) {
            (function(index) {
                buttons[i].addEventListener("click", function() {
                    alert(index);
                });
            })(i);
        }
    </script>
</body>
</html>

在这个示例中，我们使用了一个立即函数表达式来创建闭包。该函数将循环变量 i 作为参数 index 传递。在事件处理程序函数内，我们使用参数 index 来代替 i。现在单击任何一个按钮时，都会弹出对应的数字。

上一篇：javascript基础的动画教程，直观易懂 下一篇：javascript相关事件的几个概念

javascript使用for循环批量注册的事件不能正确获取索引值的解决方法

相关文章