跨浏览器的事件对象介绍


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 相关文章推荐
Prototype使用指南之enumerable.js
Jan 10 Javascript
基于jquery的大众点评,分类导航实现代码
Aug 23 Javascript
常见JS效果之图片减速度滚动实现代码
Dec 08 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
Mar 01 Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
Dec 24 Javascript
moment.js轻松实现获取当前日期是当年的第几周
Feb 05 Javascript
js实现简单鼠标跟随效果的方法
Apr 10 Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 Javascript
js简单正则验证汉字英文及下划线的方法
Nov 28 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 Javascript
微信小程序实现签到弹窗动画
Sep 21 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导出oracle库的php代码
2009/04/20 PHP
从零开始学YII2框架(六)高级应用程序模板
2014/08/20 PHP
php中socket的用法详解
2014/10/24 PHP
PHP图像处理类库及演示分享
2015/05/17 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
javascript 基础篇3 类,回调函数,内置对象,事件处理
2012/03/14 Javascript
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
javascript实现base64 md5 sha1 密码加密
2015/09/09 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
JS面向对象编程详解
2016/03/06 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
2016/06/08 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
Python time模块详解(常用函数实例讲解,非常好)
2014/04/24 Python
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
Django中modelform组件实例用法总结
2020/02/10 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
飞利浦比利时官方网站:Philips比利时
2016/08/24 全球购物
是什么让J2EE适合用来开发多层的分布式的应用
2015/01/16 面试题
今冬明春火灾防控工作方案
2014/05/29 职场文书
小学生三分钟演讲稿
2014/08/18 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书
庆六一开幕词
2015/01/29 职场文书
鲁迅故居导游词
2015/02/05 职场文书
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript