JavaScript中对事件的三种监听方式

第一种监听方式，也是最普遍使用的方式，是直接在代码上加载事件，产生效果：

< table >
< tr onmouseover = ' this.style.backgroundColor="red" ' onmouseout = ' this.style.backgroundColor="" ' >< td > text1 < / td><td>text2< / td >< / tr>
<tr οnmοuseοver='this.style.backgroundColor="red"' οnmοuseοut='this.style.backgroundColor=""'><td>text3< / td >< td > text4 < / td>< / tr >
< tr onmouseover = ' this.style.backgroundColor="red" ' onmouseout = ' this.style.backgroundColor="" ' >< td > text5 < / td><td>text5< / td >< / tr>
< / table >

第二种监听方式，是使用DOM的方式获取对象，并加载事件：

< table >
< tr >< td > text1 < / td><td>text2< / td >< / tr>
<tr><td>text3< / td >< td > text4 < / td>< / tr >
< tr >< td > text5 < / td><td>text5< / td >< / tr>
< / table >
< script >
doms = document . getElementsByTagName ( ' tr ' ) ;
for ( i = 0 ; i < doms . length ; i ++ )
{
     doms [ i ] . onmouseover = function ()
     {
         this . style . backgroundColor = " red " ;
     }
     doms [ i ] . onmouseout = function ()
     {
         this . style . backgroundColor = "" ;
     }
}
< / script>

第三种监听方式，是使用标准的addEventListener方式和IE私有的attachEvent方式，因为IE的attachEvent方式在参数传递时的缺陷，这个问题被搞得稍许有些复杂了：

< table >
< tr >< td > text1 < / td><td>text2< / td >< / tr>
<tr><td>text3< / td >< td > text4 < / td>< / tr >
< tr >< td > text5 < / td><td>text5< / td >< / tr>
< / table >
< script >
doms = document . getElementsByTagName ( ' tr ' ) ;
 
function show_color ( where )
{
     this . tagName ? where = this : null
     where . style . backgroundColor = " red " ;
}
 
function hide_color ( where )
{
     this . tagName ? where = this : null
     where . style . backgroundColor = "" ;
}
 
function for_ie ( where , how )
{
     return function ()
     {
         how ( where ) ;
     }    
}
 
for ( i = 0 ; i < doms . length ; i ++ )
{
     try
     {
         doms [ i ] . addEventListener ( ' mouseover ' , show_color , false ) ;
         doms [ i ] . addEventListener ( ' mouseout ' , hide_color , false ) ;
     }
     catch ( e )
     {
         doms [ i ] . attachEvent ( ' onmouseover ' , for_ie ( doms [ i ] , show_color )) ;
         doms [ i ] . attachEvent ( ' onmouseout ' , for_ie ( doms [ i ] , hide_color )) ;
     }
}
< / script>

在绑定多个相同的事件的时候，前两种方法会产生覆盖，而第三中方法则会同时执行多个事件。