javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)


Posted in Javascript onAugust 22, 2012
var EventUtil={ //跨浏览器处理程序---创建方法 
addHandler:function(element,type,handler){ 
if(element.addEventListener){ 
element.addEventListneter(type,handler,false); 
}else if(element.attachEvent){ 
element.attachEvent("on"+type,handler); 
}else{ 
element["on"+type]=handler; 
} 
} 
removeHandler:function(element,type,handler){ //跨浏览器处理程序---删除方法 
if(element.removeEventListener){ 
element.removeEventListneter(type,handler,false); 
}else if(element.detachEvent){ 
element.detachEvent("on"+type,handler); 
}else{ 
element["on"+type]=handler; 
} 
} 
getEvent:function(event){ //跨浏览器事件对象---返回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.canceBubble=false; 
} 
} 
getRelatedTarget:function(event){ //跨浏览器获取相关元素 
if(event.relatedTarget){ 
return event.relatedTarget; 
}else if(event.toElement){ 
return envent.toElement; 
}else if(event.fromElement){ 
return event.fromElement; 
}else{ 
return null; 
} 
} 
getButton:function(event){ //鼠标事件的button属性检测 
if(document.implementation.hasFeature("MouseEvent","2.0")){ 
return event.button; 
}else{ 
switch(event.button){ 
case 0: 
case 1: 
case 3: 
case 5: 
case 7: 
return 0; 
case 2: 
case 6: 
return 2 
case 4: 
return 1 
} 
} 
} 
getCharCode:function(event){ //跨浏览器字符编码---charCode属性检测 
if(typeof event,charCode=="number"){ 
return event.charCode; 
}else{ 
return event.keyCode; 
} 
} 
}

事件委托:事件处理程序过多的解决方案,减少内存并且提高性能;
模拟事件:这个比较复杂,要慢慢研究;
Javascript 相关文章推荐
jQuery自定义事件的简单实现代码
Jan 27 Javascript
javascript实现连续赋值
Aug 10 Javascript
javascript+css3 实现动态按钮菜单特效
Feb 06 Javascript
详解如何较好的使用js
Dec 16 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
Dec 31 Javascript
js面向对象编程总结
Feb 16 Javascript
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
vuex 使用文档小结篇
Jan 11 Javascript
node.js博客项目开发手记
Mar 16 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
Jan 17 Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
微信小程序input抖动问题的修复方法
Mar 03 Javascript
js选取多个或单个元素的实现代码(用class)
Aug 22 #Javascript
javascript动态加载三
Aug 22 #Javascript
javascript动态加载二
Aug 22 #Javascript
javascript动态加载实现方法一
Aug 22 #Javascript
原生js写的放大镜效果
Aug 22 #Javascript
window.open不被拦截的实现代码
Aug 22 #Javascript
EASYUI TREEGRID异步加载数据实现方法
Aug 22 #Javascript
You might like
阿拉伯的咖啡与水烟
2021/03/03 咖啡文化
PHP daddslashes 使用方法介绍
2012/10/26 PHP
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
JS中表单的使用小结
2014/01/11 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
javascript连续赋值问题
2015/07/08 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
layui获取选中行数据的实例讲解
2018/08/19 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
JS浮点数运算结果不精确的Bug解决
2019/08/01 Javascript
JS中FileReader类实现文件上传及时预览功能
2020/03/27 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
Python中replace方法实例分析
2014/08/20 Python
详解Python中expandtabs()方法的使用
2015/05/18 Python
Python实现的合并两个有序数组算法示例
2019/03/04 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
python操作文件的参数整理
2019/06/11 Python
python 实现多维数组(array)排序
2020/02/28 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
python import 上级目录的导入
2020/11/03 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
工程师求职简历的自我评价分享
2013/10/10 职场文书
新员工试用期自我鉴定
2014/04/17 职场文书
爱我中华教学反思
2014/04/28 职场文书
乡镇领导班子批评与自我批评材料
2014/09/23 职场文书
居委会个人对照检查材料思想汇报
2014/09/29 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python