js的事件处理

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>