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

为什么for循环中直接使用tr[i]不可以,(详情见下面代码)

为什么for循环中直接使用tr[i]不可以

window.onload = function(){
     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
        var tr = document.getElementsByTagName("tr");
        for(var i = 0; i < tr.length; i++)
        {
           tr[i].onmouseover=function()
            {
                tr[i].style.backgroundColor = "#f2f2f2";
            }
            tr[i].onmouseout=function()
            {
                tr[i].style.backgroundColor = "#fff";
            }      

       }

}

这是别人的代码,但我的问题和他有点不一样,这是别人回答他:

这是由于事件的异步执行造成的。方法一中给每个tr都绑定了onmouseover和onmouseout事件,页面加载完成后,for循环中的i已经变为了tr.length。而事件此时还没有被触发,当用户移动鼠标触发事件时,事件函数中的代码  tr[i].style.backgroundColor = "#f2f2f2";开始执行,而这时i的值已经是tr.length了,tr[i]即tr[tr.length],可tr中最后一个是tr[tr.length-1],而tr[tr.length]这个节点是不存在的。

我的问题是:

就是for循环结束后,每个tr[i]的事件不是已经注册了吗?就是tr[0].style.backgroundColor = "#f2f2f2";这样每个tr[i]事件都注册了,那这时i怎么变不是应该没关系了吗,为什么鼠标移动的时候触发事件的时候还要在执行tr[i].style.backgroundColor = "#f2f2f2";这个啊,不是应该执行如tr[0].style.backgroundColor = "#f2f2f2";这样的,执行的是注册的事件吗?


正在回答

4 回答

似乎有点明白,似乎不明白。。。我也是那样写的,怎么都行不通。。。把方法单独写到一个方法就OK,这感觉就像是这语言有点ZZ

0 回复 有任何疑惑可以回复我~

电脑有毒,鉴定完毕


0 回复 有任何疑惑可以回复我~

你得理解不对,每个tr[i]事件确实注册了,但是只是注册到 tr[i].onmouseover=function()这一步,具体事件内容还是要等触发的时候再去获取

0 回复 有任何疑惑可以回复我~
#1

ゞ苏戏 〃

为什么会没有注册方法体,具体原因给解释解释......
2016-11-10 回复 有任何疑惑可以回复我~
#2

慕容7796276 提问者

你是说等到触发的时候再去获取,是动态的获取吗?比如这个代码 window.onload=function(){ var tr = document.getElementsByTagName("tr"); for(var i=0;i<1000000;i++){ tr[i].onmouseover=function(){ document.write(i); } } } 要是按照你说的触发的时候获取那i应该会非常大的啊,为什么输出的是3啊?
2016-11-10 回复 有任何疑惑可以回复我~
#3

ゞ苏戏 〃 回复 慕容7796276 提问者

蠢,over
2016-11-10 回复 有任何疑惑可以回复我~
#4

stone310 回复 慕容7796276 提问者

我不知道你这段代码是怎么执行出来为3的,能发全吗??
2016-11-10 回复 有任何疑惑可以回复我~
#5

stone310 回复 ゞ苏戏 〃

js是单线程,事件触发后才会将对应的回调放到线程上等待执行,所以,没事多看看书,电脑有毒这种言论当个笑话说也没什么意思
2016-11-10 回复 有任何疑惑可以回复我~
#6

慕容7796276 提问者

求回复啊
2016-11-11 回复 有任何疑惑可以回复我~
#7

慕容7796276 提问者 回复 stone310

window.onload = function(){ var tr = document.getElementsByTagName("tr"); for(var i=0;i<1000000;i++){ tr[i].onmouseover=function(){ document.write(i);}}} </script>
2016-11-11 回复 有任何疑惑可以回复我~
#8

慕容7796276 提问者 回复 stone310

<body> <table border="1" width="50%" id="table"> <tr> <th>学号</th> <th>姓名</th> <th>操作</th> </tr> <tr> <td>xh001</td> <td>王小明</td> <td><a href="javascript:;" >删除</a></td> <!--在删除按钮上添加点击事件 --> </tr>
2016-11-11 回复 有任何疑惑可以回复我~
#9

慕容7796276 提问者 回复 stone310

<tr> <td>xh002</td> <td>刘小芳</td> <td><a href="javascript:;" >删除</a></td> <!--在删除按钮上添加点击事件 --> </tr> </table> <input type="button" value="添加一行" /> <!--在添加按钮上添加点击事件 --> </body>
2016-11-11 回复 有任何疑惑可以回复我~
#10

stone310 回复 慕容7796276 提问者

。。你这页面就3个<tr>,最多i就是3了,i=4的时候,tr[i].onmouseover已经报错了好吧
2016-11-11 回复 有任何疑惑可以回复我~
#11

stone310 回复 慕容7796276 提问者

应该说i=2的时候,事件都是被注册的,i为3的时候,tr[i]不存在,事件注册时报错,最终i为3
2016-11-11 回复 有任何疑惑可以回复我~
#12

慕容7796276 提问者 回复 stone310

js要是报错了是不是就不会运行下去了啊?也就是循环就会停止,而此时i等于3
2016-11-12 回复 有任何疑惑可以回复我~
#13

stone310 回复 慕容7796276 提问者

报错了之后的代码就不执行了
2016-11-13 回复 有任何疑惑可以回复我~
查看10条回复

怎么没人回答我的,跪求解答


0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

为什么for循环中直接使用tr[i]不可以,(详情见下面代码)

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信