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>
<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>
<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>
<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>
<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>
<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>
本文转自 xcf007 51CTO博客，原文链接：http://blog.51cto.com/xcf007/102850，如需转载请自行联系原作者