我想直接在tr上绑定onmouseover和onmouseout事件
<tr onmouseover="mouse(this)">
然后
function mouse(obj){
obj.style.backgroundColor ="#f2f2f2";
}
window.onload = function(){
mouse();
}
做了这些改动之后
会报错
Uncaught TypeError: Cannot read property 'style' of undefined
哪位大神给解答一下。
2016-07-27
要解决这个问题，首先要了解window.onload到底是什么？
window.onload用法详解:
网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能导致无法获取对象的情况，为了避免这种情况的发生，可以使用以下两种方式:
一.将脚本代码放在网页的底端，这样在运行脚本代码的时候，可以确保要操作的对象已经加载完成。
二.通过window.onload来执行脚本代码。
第一种方式感觉比较凌乱（其实推荐使用），往往我们需要将脚本代码放在一个更为合适的地方，那么window.onload方式就是一个良好的选择。window.onload是一个事件，当文档加载完成之后就会触发该事件，可以为此事件注册事件处理函数，并将要执行的脚本代码放在事件处理函数中，于是就可以避免获取不到对象的情况。
----------------------------------来自http://www.softwhy.com/forum.php?mod=viewthread&tid=6191
因为是顺序加载的，所以有些对象未加载完程序就不能执行，所以才使用window.onload，但是在这题在调用事件onmouseover时tr已经加载，所以不需要用到window.onload。删掉就可以解决。
还有一种就是如果你是要一开始初始化背景的话，那么请把
window.onload = function(){
mouse(); //改为mouse(document.getElementById("tr")) <-这里为了方便给tr加了id“tr”
}
因为你要调用函数要注意，这个函数需不需要给他实际参数，如果不给的话就会出错，比如Uncaught TypeError: Cannot read property 'style' of undefined 这个，因为没有对象，所以它的style自然是undefined
实现出来：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<script type="text/javascript">
function mouse(obj){
obj.style.backgroundColor ="red";
}
window.onload = function(){
mouse(document.getElementById("tr"));
}
</script>
</head>
<body >
<table>
<tr id="tr" onmouseover="mouse(this)">
<th>dadadsdasdd</th>
<tr>
</table>
</body>
</html>
举报
