为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

qq_笑_17 2018-10-10 18:15:55
表格鼠标悬停变色。代码:     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";              }          }
查看完整描述

1 回答

?
杨__羊羊

TA贡献1943条经验 获得超7个赞

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

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


查看完整回答
反对 回复 2018-11-18
  • 1 回答
  • 0 关注
  • 578 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号