跨浏览器的事件对象介绍


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 相关文章推荐
HTML中Select不用Disabled实现ReadOnly的效果
Apr 07 Javascript
js程序中美元符号$是什么
Jun 05 Javascript
jQuery页面滚动浮动层智能定位实例代码
Aug 23 Javascript
jQuery右键菜单contextMenu使用实例
Sep 28 Javascript
使用 Node.js 做 Function Test实现方法
Oct 25 Javascript
Javascript writable特性介绍
Feb 27 Javascript
简易的投票系统以及js刷票思路和方法
Apr 07 Javascript
JavaScript String 对象常用方法总结
Apr 28 Javascript
jQuery实现的可编辑表格完整实例
Jun 20 Javascript
Node.js批量给图片加水印的方法
Nov 15 Javascript
vue中页面跳转拦截器的实现方法
Aug 23 Javascript
深入掌握 react的 setState的工作机制
Sep 27 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
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
php 8小时时间差的解决方法小结
2009/12/22 PHP
php图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
php中in_array函数用法分析
2014/11/15 PHP
php中mt_rand()随机数函数用法
2014/11/24 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
PHP浮点比较大小的方法
2016/02/14 PHP
一个简单的php路由类
2016/05/29 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
Laravel 将数据表的数据导出,并生成seeds种子文件的方法
2019/10/09 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
在for循环中length值是否需要缓存
2015/07/27 Javascript
理解AngularJs指令
2015/12/10 Javascript
改变checkbox默认选中状态及取值的实现代码
2016/05/26 Javascript
node.js文件上传处理示例
2016/10/27 Javascript
js实现悬浮窗效果(支持拖动)
2017/03/09 Javascript
浅析vue-router原理
2018/10/19 Javascript
vue项目开启Gzip压缩和性能优化操作
2020/10/26 Javascript
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
python查找目录下指定扩展名的文件实例
2015/04/01 Python
微信跳一跳python代码实现
2018/01/05 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
Django中的Model操作表的实现
2018/07/24 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
瑞典时尚耳机品牌:Urbanears
2017/07/26 全球购物
MADE法国:提供原创设计师家具
2018/09/18 全球购物
乐观大学生的自我评价
2014/01/10 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
春风化雨观后感
2015/06/11 职场文书