简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Js遍历元素并赋予事件绑定匿名函数时，为什么调试说未定义元素？
PHP中文网
PHP中文网 2017-04-11 12:03:05
0
6
804

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

     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";
             }
         }
PHP中文网
PHP中文网

认证0级讲师

全部回覆(6)
Peter_Zhu
Peter_Zhu2017-04-11 12:05:05 6樓

让我们先来假设页面上有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的话，就是指向事件被触发的目标元素，这个是浏览器传给你了，所以一定正确

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

點贊 +0
新增回覆
伊谢尔伦
伊谢尔伦2017-04-11 12:05:05 5樓 
 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";
     }
 }

翻译一遍运行过程：

  1. 获取所有tr元素

  2. 遍历所有tr元素给他们绑定两个事件

  3. 循环结束，此时i值为tr.length

  4. 当移入某一个时，触发事件，去寻找tr[tr.length],得到的是undefined

  5. 当undefined.style时报错

點贊 +0
新增回覆
刘奇
刘奇2017-04-11 12:05:05 4樓

这个问题是闭包变量引用的问题， @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);
}
點贊 +0
新增回覆
大家讲道理
大家讲道理2017-04-11 12:05:05 3樓

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

點贊 +1
新增回覆
PHPzhong
PHPzhong2017-04-11 12:05:05 2樓

楼上正解，等同于tr.length

點贊 +0
新增回覆
左手右手慢动作
左手右手慢动作2017-04-11 12:05:05 1樓

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

举例：


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

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

<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中变量的不同。鼠标滑过前三个色块，看浏览器调试窗口的输出。再滑过后三个色块看看输出什么。

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！