为什么for循环中直接使用tr[i]不可以，而将onmouseover等包含到一个函数中调用就可以了？（详情见下面代码）
wolf3c
2015-09-14 20:01
方式1（无法实现好的效果）：
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";
}
}
}
方法二（可以实现）：
window.onload = function(){
// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
var tr = document.getElementsByTagName("tr");
for(var i = 0; i < tr.length; i++)
{
ch(tr[i]);
}
function ch(obj)
{
obj.onmouseover=function()
{
obj.style.backgroundColor = "#f2f2f2";
}
obj.onmouseout=function()
{
obj.style.backgroundColor = "#fff";
}
}
}
4回答
-
- 大柏树
- 2015-09-16 17:05:16
这是由于事件的异步执行造成的。方法一中给每个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]这个节点是不存在的。
-
- qq_望_6
- 2016-03-19 15:46:28
为什么i=3的时候循环不成立，还执行下面的代码？
-
- fangshuiyu
- 2015-10-28 00:22:46
像参考答案里用this指向当前对象就行了，你那个obj也是同样道理
-
- MLIML
- 2015-09-14 20:47:15
你在第一个里面for循环里面alert(tr[i])，会返回[object HTMLTableRowElement]，HTMLTableRowElement是一个接口，这个我也不清楚，反正他不是一个正常的对象，你还可以用另一种方式验证他的类型，就是你在alert(arr[2] instanceof Object)，会返回false，说明他并不是一个Object，所以第一个会调用失败。
第二个function里面你把tr[i]当做参数传入，参数的类型是any，也就是说他可以是任意的类型，使用的时候当做Object使用，在这过程中参数类型发生了变化
JavaScript进阶篇
468061 学习 · 21891 问题
相似问题