让js脚本具有跨浏览器兼容的事件处理，是一个程序员应该注意的基本问题，让自己编写的js脚本更具有移植性。
到目前为此，许多js程序员编写的代码里的事件处理过程都是老版本的，DOM之前的事件处理模型，许多主流的浏览器
仍然能提供对老版本模型的支持，但是Javascript开发人员应该多采用新的，基于规范的事件处理模型，也就是被称做
Dom Level 2的事件模型。老事件模型和新的Dom Level 2事件模型之间，最主要的区别在于：
1.新事件模型并不依赖于特定的事件来处理属性。
2.你可以对任何一个对象的任何一种事件注册多个事件句柄函数。
用来替代事件句柄属性的每个对象提供的3个方法：addEventListener、removeEventListener和dispatchEvent。第一个方法用来添加
一个事件监听器，第二个方法用来删除一个事件监听器，第三个用来分发一个新事件。
addEventListener的语法是：
下载: yovae.js
-
addEventListener('event',eventFuntion,boolean);//第一个参数是事件如click或load，第二个参数是自定义事件处理方法，第三个参数如果
//为false则事件监听器将以冒泡方式处理，如为true则用事件捕获方法处理。
因为各个浏览器在事件处理机制有所不同，特别是微软的IE浏览器只支持自己的事件处理机制，我写了一个可以重用的跨浏览器兼容事件处理方法，代码如下：
下载: yovae.js
- <script type="text/javascript">
- //<![CDATA[
- function catchEvent(eventObj,eventBody,eventHandler){//添加事件监听方法
-
if(eventObj.addEventListener){ -
eventObj.addEventListener(eventBody,eventHanndler,false); -
} -
else if(eventObj.attachEvent){ -
eventBody="on"+eventBody; -
eventObj.attachEvent(eventBody,eventHanlder); -
} -
} - function canncelEvent(eventBody){//取消一个事件方法
-
if(eventBody.preventDefault){ -
eventBody.preventDefault(); -
eventBody.stopPropagation(); -
} -
else{ -
eventBody.returnValue=false; -
eventBody.cancelBubble=
作者: fitter
- 该日志由 fitter 于11年前发表在综合分类下，最后更新于 2013年10月09日.
- 转载请注明: 具有跨浏览器兼容的事件处理javascript脚本 | 学步园 +复制链接
抱歉!评论已关闭.