具有跨浏览器兼容的事件处理javascript脚本

让js脚本具有跨浏览器兼容的事件处理，是一个程序员应该注意的基本问题，让自己编写的js脚本更具有移植性。

到目前为此，许多js程序员编写的代码里的事件处理过程都是老版本的，DOM之前的事件处理模型，许多主流的浏览器

仍然能提供对老版本模型的支持，但是Javascript开发人员应该多采用新的，基于规范的事件处理模型，也就是被称做

Dom Level 2的事件模型。老事件模型和新的Dom Level 2事件模型之间，最主要的区别在于：

1.新事件模型并不依赖于特定的事件来处理属性。
2.你可以对任何一个对象的任何一种事件注册多个事件句柄函数。

用来替代事件句柄属性的每个对象提供的3个方法：addEventListener、removeEventListener和dispatchEvent。第一个方法用来添加

一个事件监听器，第二个方法用来删除一个事件监听器，第三个用来分发一个新事件。

addEventListener的语法是：

下载: yovae.js

1. addEventListener('event',eventFuntion,boolean);//第一个参数是事件如click或load，第二个参数是自定义事件处理方法，第三个参数如果 //为false则事件监听器将以冒泡方式处理，如为true则用事件捕获方法处理。

因为各个浏览器在事件处理机制有所不同，特别是微软的IE浏览器只支持自己的事件处理机制，我写了一个可以重用的跨浏览器兼容事件处理方法，代码如下：

下载: yovae.js

1. <scripttype="text/javascript">
2. //<![CDATA[
3. functioncatchEvent(eventObj,eventBody,eventHandler){//添加事件监听方法
4. if(eventObj.addEventListener){
5. eventObj.addEventListener(eventBody,eventHanndler,false);
6. }
7. elseif(eventObj.attachEvent){
8. eventBody="on"+eventBody;
9. eventObj.attachEvent(eventBody,eventHanlder);
10. }
11. }
12. functioncanncelEvent(eventBody){//取消一个事件方法
13. if(eventBody.preventDefault){
14. eventBody.preventDefault();
15. eventBody.stopPropagation();
16. }
17. else{
18. eventBody.returnValue=false;
19. eventBody.cancelBubble=true;
20. }
21. }
22. //]]>
23. </script>

原文链接：具有跨浏览器兼容的事件处理javascript脚本