javascript事件对象参数兼容各浏览器写法

javascript事件对象参数兼容各浏览器写法:
通常调用事件处理程序时候，会将事件对象作为一个参数传递，事件对象的属性包含有当前事件的详细信息。
由于不同浏览器对于事件对象参数的传递不同，在实际应用中可能会带来不少的麻烦，当然有经验的编程人员能够编写出兼容性良好的代码，但是对于初次接触到类似问题的编程人员可能导致不少的麻烦，下面就通过实例简单介绍一下如何兼容各主流浏览器的事件处对象传递方式。
一.通过属性注册事件处理函数:
可以使用属性方式注册事件处理函数，例如下面这种形式:

 

mydiv.onclick=myonclick;

以上代码可以为mydiv的onclick事件注册事件处理函数。
这是一种常用的注册事件处理函数的方式，但是在传递事件参数的时候具有浏览器兼容性问题。
代码实例:

<script type="text/javascript"> 
function myonclick(e)
{ 
  alert(e.type);
} 
window.onload=function()
{
  mydiv=document.getElementById("mytest"); 
  mydiv.onclick=myonclick;
}
</script>
</head>
<body>
  <div id="mytest"></div> 
</body>
</html>

以上代码在IE8以上浏览器和其他标准浏览器中都能够正常运行，但是在IE8和IE8以下浏览器中则无法无法运行。因为在标准浏览器中，当事件触发调用事件处理函数的时候，能够为事件处理函数传递一个事件对象参数，但是在IE8和IE8以下的浏览器中则使用全局的window.event对象作为事件对象。为了兼容IE8和IE8以下浏览器可以在处理函数使用如下通用写法：

 

function myonclick(ev)
{ 
  ev=ev||window.event;
  alert(ev.type)
}

以上代码可以判断是否传递了事件对象参数，如果传递了则使用传递的事件对象ev，否则使用window.event。
在来看一段代码实例:

<script type="text/javascript"> 
function myonclick()
{ 
  alert(event.type);
} 

window.onload=function()
{
  mydiv=document.getElementById("mytest"); 
  mydiv.onclick=myonclick;
}
</script>
</head>
<body>
  <div id="mytest"></div> 
</body>
</html>

以上代码没有传递事件事件对象参数，直接使用的window.event对象。
经过测试，以上代码可以在IE浏览器和谷歌浏览器中运行，在火狐浏览器不能运行。
总结:
1.IE8和IE8以下浏览器不能传递参数，只能使用window.event对象。
2.谷歌浏览器既可以传递事件对象参数，也可以使用window.envent对象，十分全面。
3.火狐浏览器只能使用传递的事件对象参数。
二.attachEvent()函数和addEventListener()函数注册事件处理函数:
attachEvent()函数只能在IE浏览器中生效。这个时候，可以传递事件对象参数，也可以使用window.event。
addEventListener()函数可以在谷歌、火狐或者IE8以上浏览器中生效。这个时候IE浏览器和谷歌浏览器既可以传递事件参数也可以使用window.event，火狐浏览器只能使用以参数传递的事件对象。
总结:
1.IE和谷歌浏览器可以传递事件对象参数也可以使用window.event。
2.火狐浏览器只能使用以参数形式传递的事件对象。
三.以HTML属性值的方式注册事件处理函数:
虽然此中方式不被推荐，因为违背了内容和表现分离的原色，容易使页面比较杂乱，但是由于用法简单，所以到现在使用频率也比较高。

 

<script type="text/javascript"> 
function myonclick()
{ 
  alert(event.type);
} 
</script>
</head>
<body>
  <div id="mytest" onclick="myonclick()"></div> 
</body>
</html>

以上代码在IE和谷歌浏览器可以正常运行，但是在狐火浏览器中不能够正常运行，下面把代码修改如下:

<script type="text/javascript"> 
function myonclick(e)
{ 
  alert(e.type);
} 
</script>
</head>
<body>
  <div id="mytest" onclick="myonclick(arguments[0])"></div> 
</body>
</html>

以上代码可以在谷歌、火狐或者IE8以上浏览器中正常运行，在IE8或者IE8以下不可以。很多朋友可能对arguments[0]参数感到有些蹊跷，看下面一段代码:

 

<script type="text/javascript"> 
function myonclick(e)
{ 
  alert(e.type);
} 
window.onload=function()
{
  var mytest=document.getElementById("mytest");
  mytest.onclick=function()
  {
    myonclick(arguments[0]);
  }
}
</script>
</head>
<body>
  <div id="mytest"></div> 
</body>
</html>

以认为这种方式和使用属性方式注册事件处理函数是一样的，只是多了一层转换而已。
最后总结:
1.谷歌浏览器很全面，在两种注册事件处理函数的方式中，既可以使用window.event也可以使用以参数形式传递的事件对象。
2.IE浏览器和谷歌浏览器一样也很全面。但是IE8和IE8以下浏览器扯了后腿，因为它们在使用属性方式注册的时候只能使用window.event。
3.火狐浏览器最不全面，只能够使用以参数形式传递的事件对象。

原文地址是:javascript事件对象参数兼容各浏览器写法

posted @ 2013-07-02 10:18  哥很帅的  阅读(1318)  评论(0)    收藏  举报