1.传统的方法
1.）作为HTML标签属性的事件句柄.
2.)用脚本属性
2.DOM3的方式
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，如需转载请自行联系原作者
