首页 > 代码库 > 遍历元素绑定事件时作用域是怎么回事啊,为什么要用this关键字,而直接使用元素本身就不行?

遍历元素绑定事件时作用域是怎么回事啊,为什么要用this关键字,而直接使用元素本身就不行?

如下代码,将this改为rows[i]为啥不起作用了

var rows = document.getElementsByTagName("tr");
for(var i=0;i<rows.length;i++){
   rows[i].onmouseover=function(){
       this.style.backgroundColor="#f2f2f2";
   };
   rows[i].onmouseout=function(){
       this.style.backgroundColor="#fff";
   };
}

作者:郑粲
链接:https://www.zhihu.com/question/30759173/answer/49334835
来源:知乎
著作权归作者所有,转载请联系作者获得授权。

单看这个函数
function () {
    rows[i].style.backgroundColor = ‘#f2f2f2‘;
};
这类的在循环内部定义的匿名函数,rows[i] 里的 i 保存的是外部循环变量 i 的最后一个结果,对于这个循环也就是 rows.length。而 rows[rows.length] 是不存在的(数组的最后一项也就是 rows[rows.length - 1])。

如果想使得函数于列表项一一对应,可以在使用一个闭包对 i 进行一次保存,也就是这样:
rows[i].onmouseover = (function (n) {
    return function () {
        rows[n].style.backgroundColor = ‘#f2f2f2‘;
    }
}(i));
也可以这样:
for (var i = 0; i < rows.length; i++) {
    rows[i].index = i;
    rows[i].onmouseover = function () {
        rows[this.index].style.backgroundColor = ‘#f2f2f2‘;
    }
}
// 通过给对应项添加属性 index 来保存 i 的值
 

遍历元素绑定事件时作用域是怎么回事啊,为什么要用this关键字,而直接使用元素本身就不行?