跨浏览器的事件对象介绍


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解决常见浏览器兼容问题的12种方法
Jan 04 Javascript
javascript中的new使用
Mar 20 Javascript
使用Javascript接收get传递的值的代码
Nov 30 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 Javascript
老生常谈combobox和combotree模糊查询
Apr 17 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
Apr 27 Javascript
微信小程序 自定义消息提示框
Aug 06 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
Aug 21 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
Mar 29 Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
小程序显示弹窗时禁止下层的内容滚动实现方法
Mar 20 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一行代码获取文件后缀名实例分析
2014/11/12 PHP
CI框架扩展系统核心类的方法分析
2016/05/23 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
javascript 随机展示头像实现代码
2011/12/06 Javascript
js对象关系图 方便dom操作
2012/03/18 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
javascript中mouseover、mouseout使用详解
2015/07/19 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
详解Webpack实战之构建 Electron 应用
2017/12/25 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
2018/06/10 Javascript
vue devtools的安装与使用教程
2018/08/08 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
layui多iframe页面控制定时器运行的方法
2019/09/05 Javascript
如何基于jQuery实现五角星评分
2020/09/02 jQuery
[42:23]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第二场 12.10
2020/12/13 DOTA
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
Python中用sleep()方法操作时间的教程
2015/05/22 Python
详解 Python 读写XML文件的实例
2017/08/02 Python
利用Python正则表达式过滤敏感词的方法
2019/01/21 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
Trina Turk官网:美国时装和泳装品牌
2018/06/10 全球购物
经销商会议欢迎词
2014/01/11 职场文书
司机职责范本
2014/03/08 职场文书
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
毕业生捐书活动倡议书
2015/04/27 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
导游词之太湖
2019/10/08 职场文书
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js
python基础入门之字典和集合
2021/06/13 Python