对js事件绑定的一些理解

今天在做项目的时候，在一个for循环里面添加了onclick事件，事件处理程序的输出结果并不随着循环变量的变化而变化。

我采用以下代码进行验证。

    <input type="button" value="复制">
    <script>
        for (i = 0; i < 3; i++) {
            $(":button").on("click", function() {
                alert(i);
            })
        }
    </script>

浏览器分别输出三次3

经过查阅文档及书籍后，我认为是以下原因：

在三次循环过程中，button被绑定了三个onclick事件，但事件处理函数内部的变量并不确定。在点击按钮触发事件后，从document开始进行事件捕获，运行事件处理程序，事件冒泡。

在事件处理过程中，事件处理程序函数内部变量是当前内存中储存的数值。在上述代码中，点击button时循环已经结束，i的值为3，因此浏览器会分别输出三次3。