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

Posted 2020-08-22 随意的不像实力派

如下代码，将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 的值