.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了.(这个例子是看其他博主的)