跨浏览器的事件对象介绍


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 相关文章推荐
HTTP状态代码以及定义(解释)
Feb 02 Javascript
FLASH 广告之外的链接
Dec 16 Javascript
JavaScript Event学习第八章 事件的顺序
Feb 07 Javascript
jQuery插件jRumble实现网页元素抖动
Jun 05 Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 Javascript
asp知识整理笔记3(问答模式)
Sep 27 Javascript
全国省市二级联动下拉菜单 js版
May 10 Javascript
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
vue.js实现刷新当前页面的方法教程
Jul 05 Javascript
vue 解决遍历对象显示的顺序不对问题
Nov 07 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
Apr 30 Javascript
jQuery编写QQ简易聊天框
Aug 27 jQuery
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/10/09 PHP
用PHP ob_start()控制浏览器cache、生成html实现代码
2010/02/16 PHP
三种php连接access数据库方法
2013/11/11 PHP
PHP判断文章里是否有图片的简单方法
2014/07/26 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
PHP手机号中间四位用星号*代替显示的实例
2017/06/02 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
jquery.validate使用攻略 第三部
2010/07/01 Javascript
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
js onload事件不起作用示例分析
2013/10/09 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
python使用wxpython开发简单记事本的方法
2015/05/20 Python
python从入门到精通(DAY 1)
2015/12/20 Python
Python生成MD5值的两种方法实例分析
2019/04/26 Python
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
python根据多个文件名批量查找文件
2019/08/13 Python
详解Python实现进度条的4种方式
2020/01/15 Python
Fashion Eyewear美国:英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
柒牌官方商城:中国男装优秀品牌
2017/06/30 全球购物
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
农业资源与环境专业自荐信范文
2013/12/30 职场文书
和谐社区口号
2014/06/19 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
企业委托书范本
2014/09/13 职场文书
学校总务处领导干部个人对照检查材料思想汇报
2014/10/06 职场文书
缓刑人员思想汇报
2014/10/11 职场文书
教师个人师德总结
2015/02/06 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript