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 load方法用法集锦
Dec 06 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
Aug 24 Javascript
node.js适合游戏后台开发吗?
Sep 03 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
浅析vue component 组件使用
Mar 06 Javascript
Web前端框架Angular4.0.0 正式版发布
Mar 28 Javascript
vue将对象新增的属性添加到检测序列的方法
Feb 24 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
May 16 Javascript
用Fundebug插件记录网络请求异常的方法
Feb 21 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
Jul 30 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
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 冲泡冲煮
2020最新版 PhpStudy V8.1版本下载安装使用详解
2020/10/30 PHP
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
jQuery实现DIV层收缩展开的方法
2015/02/27 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
VSCode配置react开发环境的步骤
2017/12/27 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
python实现12306火车票查询器
2017/04/20 Python
Python中最大最小赋值小技巧(分享)
2017/12/23 Python
详解python的四种内置数据结构
2019/03/19 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
如何在Python对Excel进行读取
2020/06/04 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
35款精致的 CSS3 和 HTML5 网页模板 推荐
2012/08/03 HTML / CSS
美味咖啡的顶级烘焙师:Cafe Britt
2018/03/15 全球购物
委托与事件是什么关系?为什么要使用委托
2014/04/18 面试题
创业计划书的内容步骤和要领
2014/01/04 职场文书
会计核算科岗位职责
2014/03/19 职场文书
个人合作协议书范本
2014/04/18 职场文书
金融专业求职信
2014/08/05 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
项目经理岗位职责
2015/01/31 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
队名及霸气口号大全
2015/12/25 职场文书
详解Vue3使用axios的配置教程
2022/04/29 Vue.js