闭包问题，为什么参数 i 弹出的是object mouseevent ？

Question

为什么function（i）参数 i 弹出的是object mouseevent ？它不是一个i参数吗？

 for (var i = 0; i < 5; i++) {
     abc(i);
     function abc(i){
         sumintputs[i].onclick = function(i){
             alert(i);
         };
     }
 };

Answer 1

非常感谢：@AlanZhang1973 指出错别字和代码格式错误，手机回答完就不能修改了。

for (var i = 0; i < 5; i++) {
    abc(i);
    function abc(i){
        sumintputs[i].onclick = function(){
            alert(i);
        };
    }
};

这样才会输出i。

onclick是定义了函数，有系统调用，第一个传入的参数是 event。系统最终调用的是onclick（event），所以你的i不是你定义的变量的i。

for (var i = 0; i < 5; i++) {
    abc(i);
    function abc(i){
        sumintputs[i].onclick = function(event){
            alert(event);
        };
    }
};

最新更新（2016-8-28），和评论区中的 all2005 交流，写了一个完美的demo，应该能彻底讲明白这个问题了。

<li>000</li>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>

<script>
    
//写外边也一样，更方便理解
function abc(i){
    //i 的作用域已经被限制在 abc 函数内了
    document.getElementsByTagName('li')[i].onclick = function(event){
        //i继承 abc的作用域
        console.log("单击" + i);
    }
}

for (var i = 0; i < document.getElementsByTagName('li').length; i++) {
    abc(i);
    document.getElementsByTagName('li')[i].ondblclick = function(event){
        //i就是 for后边的i，无论双击那个都是 5
        console.log("双击" + i);
    }
};

//这里 i = 5
console.log(i);
</script>

Answer 2

我觉得这样你会明白

for (var i1 = 0; i1 < 5; i1++) {
    abc(i1);
    function abc(i2) {
        sumintputs[i2].onclick = function(i3) {
            alert(i3);
        };
    }
}

Answer 3

sumintputs[i].onclick = function(i){
                          alert(i);
                    }

onclick后面是一个回调函数，回调函数意味着可能并非在此处调用，而回调函数的参数也就与外面的变量没几毛钱关系了。此处回调函数的参数是一个事件对象。当然回调函数函数体内的变量还可能有几毛钱关系，比如当你不给回调函数写参数的时候，函数体内的i只能去父级上下文去找一下了。但此处并非此种情况。

Answer 4

因为这个i的就不是外面的i了，相当于事件的event