Js遍历元素并赋予事件绑定匿名函数时，为什么调试说未定义元素？

旅行者1号

10012027

发布于
2017-02-19

小_秦

5.8k26604

更新于
2017-02-19

表格鼠标悬停变色。
代码：

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

chrome说的是 Uncaught TypeError: Cannot read property 'style' of undefined at HTMLTableRowElement.tr.(anonymous function).onmouseover

但是把tr[i]改为this就可以:

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

html javascript

阅读 3.9k

6 个回答

YT老秦

✓ 已被采纳

让我们先来假设页面上有5个tr，这样子比较好说明：

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

// 因为你页面上的鼠标事件触发是在for循环之后的
// 这时候i的赋值是tr.length，也就是i是5
// 这5个tr分别是tr[0]到tr[4]，tr[5]是代表第6个tr元素了
// 而实际上页面上没有第6个tr，所以就是undefined了
// 当鼠标移到tr时，相当于执行下面的语句：
tr[5].style.backgroundColor="#f2f2f2"; // 调了undefined的style属性，所以报错了哦

而第二段代码传this的话，就是指向事件被触发的目标元素，这个是浏览器传给你了，所以一定正确

哈哈，这是形象的理解，希望对你有帮助。

陈安柱

4k2319

发布于
2017-02-19

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

翻译一遍运行过程：

获取所有tr元素
遍历所有tr元素给他们绑定两个事件
循环结束，此时i值为tr.length
当移入某一个时，触发事件，去寻找tr[tr.length],得到的是undefined
当undefined.style时报错

边城

59.8k157274

发布于
2017-02-20

这个问题是闭包变量引用的问题， @UKer 已经回答得很清楚了。解决办法你已经给了一个，用 this。我再给你一个不用 this 的解决办法吧

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

pixcai

25618

发布于
2017-02-19

函数里的tr[i]是运行时计算的，当循环执行完，这时i就等于tr.length了，再执行绑定的函数，那函数里的tr[i]其实等于tr[tr.length]，自然就报错了。解决办法可以使用闭包。

已注销

88313352

发布于
2017-02-19

楼上正解，等同于tr.length

StormerZ

2.3k26125183

发布于
2017-02-19

即便已经采纳答案感觉你还是没GET到点上。这个问题的关键是闭包。
看一下ES6的let。

举例：


<html>
<head></head>
<body>

<div name="dvTest" style="width: 100px; height: 50px; background-color: #ff0000"></div> 
<div name="dvTest" style="width: 100px; height: 50px; background-color: #00ff00"></div> 
<div name="dvTest" style="width: 100px; height: 50px; background-color: #0000ff"></div> 
<p></p>
<div name="dvTest2" style="width: 100px; height: 50px; background-color: #ff0000"></div> 
<div name="dvTest2" style="width: 100px; height: 50px; background-color: #00ff00"></div> 
<div name="dvTest2" style="width: 100px; height: 50px; background-color: #0000ff"></div> 

<script>
    var dvTest = document.getElementsByName('dvTest');
    var dvTest2 = document.getElementsByName('dvTest2');

    for(let i=0; i<dvTest.length; i++)
    {
        dvTest[i].onmouseover=function()
        {
             console.log(i);
         }
    }


    for(var k=0; k<dvTest2.length; k++)
    {
        dvTest2[k].onmouseover=function()
        {
             console.log(k);
         }
    }



</script>
</body>
</html>

你比较一下let和var来定义for中变量的不同。鼠标滑过前三个色块，看浏览器调试窗口的输出。再滑过后三个色块看看输出什么。

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

Js遍历元素并赋予事件绑定匿名函数时，为什么调试说未定义元素？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

git提交记录问题？

怎么获取动态弹出对话框的模拟单击？

问一个鼠标滚动事件，这种是怎么实现的？

什么是闭包？闭包有哪些应用场景？