为什么我这么写mouseover不起作用？
document.getElementsByClassName("thumbnail").onmouseover = handleEvent;这样写才行：
document.onmouseover = handleEvent;
document.onmouseout = handleEvent;document.onmouseover这样子不是整个文档都和mouseover事件联系起来了吗？JavaScript
document.getElementsByClassName("thumbnail").onmouseover = handleEvent;这样写才行：
document.onmouseover = handleEvent;
document.onmouseout = handleEvent;document.onmouseover这样子不是整个文档都和mouseover事件联系起来了吗？JavaScript
这个返回的是一个dom元素数组，你不能直接在这个数组上绑定事件，必须去遍历数组的每一项，在每个元素上单独绑定。也可以使用直接绑定在document上，在handleEvent里判断事件源，事件源的class="thumbnail"则向下执行。不过性能稍微差一点，每划过什么都会去执行一次。
//如下得到的是Nodelist(元素集合),在这也就是类名为thumbnail的元素的集合，元素集合是无法绑定事件的。
document.getElementsByClassName("thumbnail")
//如果你希望同一类名的元素绑定同一个事件，
//可以遍历Nodelist集合(Nodelist是类数组元素)，为每个元素进行绑定，如下：
var elements=document.getElementsByClassName("thumbnail");
for(var i=0;i<elements.length;i++){
elements[i].onmouseover=handleEvent;
}
你好，版主大人，谢谢你的回答。
我还想问你一个问题，document.getElementsByClassName，或者document.getElementsByTagName, document.getElementById这些个函数，
必须放在所求的HTML元素后面才能起作用是吧，才能找得到是吗？
谢谢，javascript代码一般写在head里面吧，这时候dom还没加载是吗？我这样写就没用哦：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
.thumbnail
{
float: left;
margin: 10px;
padding: 10px;
border: 1px solid #DDDDDD;
}
.thumbnail-hover
{
float: left;
margin: 10px;
padding: 10px;
border: 1px solid #FF0000;
}ul li
{
list-style: none;
}
#box
{
text-align: center;
width: 400px;
height: 120px;
margin-top: 20px;
}
#large
{
width: 400px;
height: 400px;
border: 1px solid red;
}
</style><script type="text/javascript">
function display(image)
{
window.largeimage.src = image.src;
}function eventHandler(e)
{
var eSrc; if (window.event)
{
e = window.event;
eSrc = e.srcElement;
}
else
{
eSrc = e.target;
} if (e.type == "mouseover")
{
if (eSrc.className == "thumbnail")
{
eSrc.className = "thumbnail-hover";
alert(eSrc);
}
} if (e.type == "mouseout")
{
if (eSrc.className == "thumbnail-hover")
{
eSrc.className = "thumbnail";
}
}
}
var elements = document.getElementsByClassName('thumbnail');
alert(elements.length);
for(i = 0; i < elements.length; i++)
{
elements[i].onmouseover = eventHandler;
elements[i].onmouseout = eventHandler;}
</script>
</head>
<body>
<div id="large">
<img name ="largeimage" src="1.jpg" width="400" />
</div><div id="box">
<ul>
<li><div class="thumbnail"><a href="javascript: void(0)"><img src="1.jpg" width="80" height="80" /></a></div></li>
<li><div class="thumbnail"><a href="javascript: void(0)"><img src="2.jpg" width="80" height="80" /></a></div></li>
<li><div class="thumbnail"><a href="javascript: void(0)"><img src="3.jpg" width="80" height="80" /></a></div></li>
</ul>
</div>
<script type="text/javascript"></script></body>
</html>要这样写才行,为什么?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
.thumbnail
{
float: left;
margin: 10px;
padding: 10px;
border: 1px solid #DDDDDD;
}
.thumbnail-hover
{
float: left;
margin: 10px;
padding: 10px;
border: 1px solid #FF0000;
}ul li
{
list-style: none;
}
#box
{
text-align: center;
width: 400px;
height: 120px;
margin-top: 20px;
}
#large
{
width: 400px;
height: 400px;
border: 1px solid red;
}
</style><script type="text/javascript">
function display(image)
{
window.largeimage.src = image.src;
}function eventHandler(e)
{
var eSrc; if (window.event)
{
e = window.event;
eSrc = e.srcElement;
}
else
{
eSrc = e.target;
} if (e.type == "mouseover")
{
if (eSrc.className == "thumbnail")
{
eSrc.className = "thumbnail-hover";
alert(eSrc);
}
} if (e.type == "mouseout")
{
if (eSrc.className == "thumbnail-hover")
{
eSrc.className = "thumbnail";
}
}
}</script>
</head>
<body>
<div id="large">
<img name ="largeimage" src="1.jpg" width="400" />
</div><div id="box">
<ul>
<li><div class="thumbnail"><a href="javascript: void(0)"><img src="1.jpg" width="80" height="80" /></a></div></li>
<li><div class="thumbnail"><a href="javascript: void(0)"><img src="2.jpg" width="80" height="80" /></a></div></li>
<li><div class="thumbnail"><a href="javascript: void(0)"><img src="3.jpg" width="80" height="80" /></a></div></li>
</ul>
</div>
<script type="text/javascript">
var elements = document.getElementsByClassName('thumbnail');
alert(elements.length);
for(i = 0; i < elements.length; i++)
{
elements[i].onmouseover = eventHandler;
elements[i].onmouseout = eventHandler;}
</script></body>
</html>
2.把你的js放在一个外部文件中,用<script src引入。因为是先构造dom树，构造完毕后加载外部文件