首页 > 闭包问题,为什么参数 i 弹出的是object mouseevent ?

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

为什么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);
         };
     }
 };

我觉得这样你会明白

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

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


非常感谢:@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>

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

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

【热门文章】
【热门文章】