1.传统的方法
1.)作为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>Event</title>
<style type="text/css">

</style>
</head>
<body>
<!--好像现在只有IE这样的可以使用status了,其他的为了安全起见都给关闭这个功能了-->
<p><a id="netease" href="http://www.163.com" title="网易首页"     onMouseover="window.status='单击打开网易首页';return true" onMouseout="window.status=''">网易</a></p>
</body>
</html>      
         

2.)用脚本属性

<!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>Event</title>
<style type="text/css">

</style>
</head>
<body>
<!--好像现在只有IE这样的可以使用status了,其他的为了安全起见都给关闭这个功能了-->
<p><a id="netease" href="http://www.163.com" title="网易首页">网易</a></p>
<script type="text/javascript">
function handleStatus()
{
window.status='单击打开网易首页';
return true;
}
function recoverStatus()
{
window.status='';
}

document.getElementById("netease").onmouseover=handleStatus;
document.getElementById("netease").onmouseout=recoverStatus;
</script>
</body>
</html>      

2.DOM3的方式
addEventListener
 
<!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>Event</title>
<style type="text/css">
#div1
{
border:1px dotted #9a8;
background-color:#f3fedd;
padding:5px;
}
#span1
{
background-color:#fce;
display:block;
}
</style>
</head>
<body>
<div id="div1">
移到我上面
</div>
<script type="text/javascript">
function changeText()
{
document.getElementById("span1").innerHTML="我终于可以见天日啦!";
}

document.getElementById("div1").addEventListener("mouseover",changeText,false);
</script>
<span id="span1"></span>
</body>
</html>    
 
 
上面的代码在火狐3里运行如下:
 
 
 
 
 
3.IE5+的处理
IE采用的是attachEvent,而且不支持第3个参数,而且IE只是支持事件流的一部分。
<!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>Event</title>
<style type="text/css">
#div1
{
border:1px dotted #9a8;
background-color:#f3fedd;
padding:5px;
}
#span1
{
background-color:#fce;
display:block;
}
</style>
</head>
<body>
<div id="div1">
移到我上面
</div>
<script type="text/javascript">
function changeText()
{
document.getElementById("span1").innerHTML="我终于可以见天日啦!";
}

document.getElementById("div1").attachEvent("
</script>
<span id="span1"></span>
</body>
</html>        
 
注意IE的这个是onmouseover有个on,而DOM3那个没有on.
 
4.修改下移植性更好些:
<!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>Event</title>
<style type="text/css">
#div1
{
border:1px dotted #9a8;
background-color:#f3fedd;
padding:5px;
}
#span1
{
background-color:#fce;
display:block;
}
</style>
</head>
<body>
<div id="div1">
移到我上面
</div>
<script type="text/javascript">
function changeText()
{
document.getElementById("span1").innerHTML="我终于可以见天日啦!";
}

var elem=document.getElementById("div1");
if(elem.addEventListener){
elem.addEventListener("mouseover",changeText,false);
}else if(elem.attachEvent){
elem.attachEvent("
}else{
elem.
}
</script>
<span id="span1"></span>
</body>
</html>