跨浏览器的事件对象介绍


Posted in Javascript onJune 27, 2012
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 相关文章推荐
javascript下4个跨浏览器必备的函数
Mar 07 Javascript
jQuery中replaceAll()方法用法实例
Jan 16 Javascript
JS中prototype的用法实例分析
Mar 19 Javascript
jQuery中(function($){})(jQuery)详解
Jul 15 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
在线引用最新jquery文件的实现方法
Aug 26 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
May 03 Javascript
bootstrap table表格插件使用详解
May 08 Javascript
JS实现浏览上传文件的代码
Aug 23 Javascript
详解Bootstrap 学习(一)入门
Apr 12 Javascript
Javascript地址引用代码实例解析
Feb 25 Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 Javascript
UI Events 用户界面事件
Jun 27 #Javascript
浅谈Javascript鼠标和滚轮事件
Jun 27 #Javascript
浅谈Javascript事件模拟
Jun 27 #Javascript
JS时间选择器 兼容IE6,7,8,9
Jun 26 #Javascript
基于jquery & json的省市区联动代码
Jun 26 #Javascript
jquery命令汇总,方便使用jquery的朋友
Jun 26 #Javascript
Jvascript学习实践案例(开发常用)
Jun 25 #Javascript
You might like
剖析 PHP 中的输出缓冲
2006/12/21 PHP
Zend Studio (eclipse)使用速度优化方法
2011/03/23 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
javascript获取当前日期时间及其它操作函数
2011/01/11 Javascript
jQuery find和children方法使用
2011/01/31 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
2015/12/14 Javascript
JavaScript 函数的执行过程
2016/05/09 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
webpack之devtool详解
2018/02/10 Javascript
Vue指令指令大全
2019/02/09 Javascript
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
python通过pil为png图片填充上背景颜色的方法
2015/03/17 Python
Python构建XML树结构的方法示例
2017/06/30 Python
python+selenium实现163邮箱自动登陆的方法
2017/12/31 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
python 使用opencv 把视频分割成图片示例
2019/12/12 Python
python分布式计算dispy的使用详解
2019/12/22 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
python中温度单位转换的实例方法
2020/12/27 Python
台湾SHOPRO购物行家:亚洲首创影视.3C.家电.优质购物平台
2018/05/07 全球购物
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
软件测试面试题
2014/01/05 面试题
平面设计自荐信
2013/10/07 职场文书
2014村务公开实施方案
2014/02/25 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书