Question

我是一名绿手网络程序员，试图通过for循环将onclick事件函数绑定到一系列组件，并在chrome浏览器中进行了测试。

print(Constants.Validation.InvalidValue)

控制台日志显示onclick函数只接受参数3.看起来浏览器只将循环索引i取为3.我处于这样的混乱状态。我想知道JavaScript中的onclick函数是如何工作的？变量i的范围是什么？

这是控制台日志：

<!DOCTYPE html>
<html>
<head>
    <title>Onclick Test</title>
</head>
<body>
    <button id="button1">BUTTON</button>
    <button id="button2">BUTTON</button>
    <button id="button3">BUTTON</button>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
        for (var i = 0; i < document.getElementsByTagName('button').length; i++) {
            let g = () => console.log(i);

            document.getElementsByTagName('button')[i].onclick = g;

            g();
        }

        $(document).ready(() => {
            for (var i = 0; i < $('button').length; i++) {

                let f = () => console.log(i);

                f();

                $('button').eq(i).click(f);
            }
        });
    </script>
</body>
</html>

Answer 1

这里我在onclick函数里面直接引用了onclick处理程序之外的i。因此，当onclick处理程序外部的i发生更改时，onclick处理程序中的i也会发生更改。

使用getHandler方法将i传递给另一个函数时，它会被关闭以进行修改，因此即使边界函数更改了值，它也不会改变。

JavaScript的范围是功能级别，而不是块级别，并且创建一个   闭合只意味着封闭范围被添加到词法中   所附函数的环境。

循环终止后，函数级变量i的值为3，
  这就是内部功能“看到”的内容。      请参阅以下问题的答案

JavaScript closure inside loops – simple practical example

<script type="text/javascript">

     function getHandler(i){
       return function () {
            console.log(i);
         }
     }        

    for (var i = 0; i < document.getElementsByTagName('button').length; i++) {
        let g = getHandler(i);

        document.getElementsByTagName('button')[i].onclick = g;

        g();
    }

    $(document).ready(() => {
        for (var i = 0; i < $('button').length; i++) {

            let f = getHandler(i);

            f();

            $('button').eq(i).click(f);
        }
    });
</script>

Answer 2

这是因为基本上您将相同的函数g或f（在代码中看到的两个不同的循环中）作为事件侦听器附加到所有按钮。因此，无论单击哪个按钮，都会调用相同的函数，如果您的代码为i，则会将最后设置的3记录为按钮总数。

您可以使用jQuery的index()方法来获得所需的结果。

$(document).ready(() => {
  for (var i = 0; i < $('button').length; i++) {
    $('button').eq(i).click(function (){
      console.log($(this).index());
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1">BUTTON</button>
<button id="button2">BUTTON</button>
<button id="button3">BUTTON</button>

JavaScript onclick事件编译器＆amp;运行时间

2 个答案: