关于JavaScript闭包中for循环执行顺序(this和trs[i]问题)

.over{
    Background:red;
}
.out{
    Background:white;
}

var trs=document.getElementsByTagName("tr");
for(var i=0;i<trs.length;i++){
    trs[i].onmouseover= function(){
        this.className="over";
    };
   trs[i].onmouseout= function(){
        this.className="out";
    }
}

 

其实for循环的过程中对于每个trs[i] 所执行的动作是 绑定onmouseover  和 onmouseout两个事件,不会去执行 function(){} , 一直到执行整个for循环, 所以在内存中的i的大小已经等于length

 

因为每行都绑定了两个事件属性, 所以当鼠标触发某一行时,会发生这样的事情:

this指向的触发事件的行本身,function执行

 

注意:如果写的不是this而是trs[i],则结果是undefined ,因为触发了事件function首先会去找i变量,但是此时内存中的i是length, 所以这里要写this.

 

对于绑定事件和执行方法的流程,可以通过下面这个例子来看:

function test() {
    var temp = 10;
    for (var i = 0; i < 5; i++) {
        document.getElementById("p"+i).onclick = function(){
            alert(temp);
        }
    }
    temp = 20;
}
test();

 

点击后会发现弹出的temp值为20, 而不是10, 这就证明了 for循环中只是执行了绑定事件的动作, 当我们触发点击事件后, 此时temp的值其实已经是20了.(这个例子是看其他博主的)