复制代码 代码如下: var eventUtil = { getEvent : function(event){ return event ? event : window.event; }; getTarget : function(event){ return event.target || event.srcElement; }; preventDefault : function(event){ if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue = false; } }; stopPropagation : function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble = true; } }; }; 　　当使用一个DOM兼容的浏览器时，event 变量仅仅是传入并被返回，在IE中event参数将是undefined ，因此window.event将会被返回，所以采用eventUtil.getEvent()方法无论在dom还是IE上event返回值都是可用的。 　　同理第二个方法，getTarge()方法，先检测event对象的target属性，如果存在，则返回targe，若为IE浏览器则返回srcElement属性。保证兼容性。 复制代码 代码如下: btn.onclick = function(event){ event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); }; 　　第三个方法，preventDefault ()方法，当event对象传入时，先检测event对象的preventDefault()方法是否可用，若可用则调用preventDefault方法，若不可用将event的returnValue 设置为false。 　　例如： 　　 复制代码 代码如下: var link = document.getElementById("myLink"); link.onclick = function(event){ event = EventUtil.getEvent(event); EventUtil.preventDefault(event); }; 　　这段代码阻止了一个link标签的默认行为，event对象来自于EventUtil的getEvent方法的返回值 并作为preventDefault()方法的传入参数。 　　第四个方法stopPropagation(),用同样的方法，首先尝试DOM方法，之后尝试cancelBubble属性，例如下面的代码： 复制代码 代码如下: var btn = document.getElementById("myBtn"); btn.onclick = function(event){ alert("Clicked"); event = EventUtil.getEvent(event); EventUtil.stopPropagation(event); }; document.body.onclick = function(event){ alert("Body clicked"); }; 记得这个方法可能阻止事件在浏览器的冒泡阶段 或者 同时阻止事件在浏览器的冒泡和捕获阶段。

　　推荐阅读

　　JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载

JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载 以前对于JavaScript总是在用到的时候在页面上写几个函数，基本没考虑到函数的封装与重用，最近有个项目可能对于这方面要求有点高，所以就研究了下类似jQ>>>详细阅读

本文标题：跨浏览器的事件对象介绍

地址：http://www.17bianji.com/kaifa2/JS/23284.html

 1/2    1