JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件


Posted in Javascript onAugust 14, 2012

跨平台的事件EventUtil对象

EventUtil:

var EventUtil={ 
addEventHandler:function(oTarget, sEventType, fnHandler){ 
if(oTarget.addEventListener){ 
oTarget.addEventListener(sEventType,fnHandler,false); 
} else if(oTarget.attachEvent){ 
oTarget.attachEvent("on"+sEventType,fnHandler); 
} else{ 
oTarget["on"+sEventType]=fnHandler; 
} 
}, 
removeEventHandler:function(oTarget, sEventType, fnHandler){ 
if(oTarget.removeEventListener){ 
oTarget.removeEventListener(sEventType,fnHandler); 
} else if(oTarget.detachEvent){ 
oTarget.detachEvent("on"+sEventType,fnHandler); 
} else{ 
oTarget["on"+sEventType]=null; 
} 
}, 
formatEvent:function(oEvent){ 
var isIE=/msie/i.test(navigator.userAgent), 
isWin=/win/i.test(navigator.userAgent); 
if(isIE && isWin){ 
oEvent.charCode=(oEvent.type == "keypress")?oEvent.keyCode:0; 
oEvent.eventPhase =2; 
oEvent.isChar=(oEvent.charCode>0); 
oEvent.pageX=oEvent.clientX+document.body.scrollLeft; 
oEvent.pageY=oEvent.clientY+document.body.scrollTop; 
oEvent.preventDefault=function(){ 
this.returnvalue=false; 
} 
if(oEvent.type == "mouseout"){ 
oEvent.relateTarget=oEvent.toElement; 
}else if(oEvent.type=="mouseover"){ 
oEvent.relatedTarget=oEvent.fromElement; 
} 
oEvent.stopPropagation=function(){ 
this.cancelBubble=true; 
} 
oEvent.target=oEvent.srcElement; 
oEvent.time=(new Date()).getTime(); 
} 
return oEvent; 
}, 
getEvent:function(){ 
if(window.event){ 
return this.formatEvent(window.event); 
}else{ 
return EventUtil.getEvent.caller.arguments[0]; 
} 
} 
}

测试
<!DOCTYPE html> 
<html> 
<head> 
<title>Demo</title> 
<meta charset="utf-8"/> 
<script> 
var EventUtil={ 
addEventHandler:function(oTarget, sEventType, fnHandler){ 
if(oTarget.addEventListener){ 
oTarget.addEventListener(sEventType,fnHandler,false); 
} else if(oTarget.attachEvent){ 
oTarget.attachEvent("on"+sEventType,fnHandler); 
} else{ 
oTarget["on"+sEventType]=fnHandler; 
} 
}, 
removeEventHandler:function(oTarget, sEventType, fnHandler){ 
if(oTarget.removeEventListener){ 
oTarget.removeEventListener(sEventType,fnHandler); 
} else if(oTarget.detachEvent){ 
oTarget.detachEvent("on"+sEventType,fnHandler); 
} else{ 
oTarget["on"+sEventType]=null; 
} 
}, 
formatEvent:function(oEvent){ 
var isIE=/msie/i.test(navigator.userAgent), 
isWin=/win/i.test(navigator.userAgent); 
if(isIE && isWin){ 
oEvent.charCode=(oEvent.type == "keypress")?oEvent.keyCode:0; 
oEvent.eventPhase =2; 
oEvent.isChar=(oEvent.charCode>0); 
oEvent.pageX=oEvent.clientX+document.body.scrollLeft; 
oEvent.pageY=oEvent.clientY+document.body.scrollTop; 
oEvent.preventDefault=function(){ 
this.returnvalue=false; 
} 
if(oEvent.type == "mouseout"){ 
oEvent.relateTarget=oEvent.toElement; 
}else if(oEvent.type=="mouseover"){ 
oEvent.relatedTarget=oEvent.fromElement; 
} 
oEvent.stopPropagation=function(){ 
this.cancelBubble=true; 
} 
oEvent.target=oEvent.srcElement; 
oEvent.time=(new Date()).getTime(); 
} 
return oEvent; 
}, 
getEvent:function(){ 
if(window.event){ 
return this.formatEvent(window.event); 
}else{ 
return EventUtil.getEvent.caller.arguments[0]; 
} 
} 
} 
EventUtil.addEventHandler(window,"load",function(){ 
var oDiv=document.getElementById("div1"); 
EventUtil.addEventHandler(oDiv,"mouseover",handleEvent); 
EventUtil.addEventHandler(oDiv,"mouseout",handleEvent); 
EventUtil.addEventHandler(oDiv,"mousedown",handleEvent); 
EventUtil.addEventHandler(oDiv,"mouseup",handleEvent); 
EventUtil.addEventHandler(oDiv,"click",handleEvent); 
EventUtil.addEventHandler(oDiv,"dblclick",handleEvent); 
}); 
function handleEvent(){ 
var oEvent=EventUtil.getEvent(); 
var oTextbox=document.getElementById("txt1"); 
oTextbox.value+="\n>"+oEvent.type; 
oTextbox.value+="\n target is "+oEvent.target.tagName; 
if(oEvent.relatedTarget){ 
oTextbox.value+="\n relateTarget is "+oEvent.relatedTarget.tagName; 
} 
} 
</script> 
</head> 
<body> 
<p>Use your mouse to click and double click the red square.</p> 
<div id="div1" style="width:100px;height:100px;background:red;">Test</div> 
<p><textarea id="txt1" rows="15" cols="50"></textarea></p> 
</body> 
</html> 
// 0); 
oEvent.pageX=oEvent.clientX+document.body.scrollLeft; 
oEvent.pageY=oEvent.clientY+document.body.scrollTop; 
oEvent.preventDefault=function(){ 
this.returnvalue=false; 
} 
if(oEvent.type == "mouseout"){ 
oEvent.relateTarget=oEvent.toElement; 
}else if(oEvent.type=="mouseover"){ 
oEvent.relatedTarget=oEvent.fromElement; 
} 
oEvent.stopPropagation=function(){ 
this.cancelBubble=true; 
} 
oEvent.target=oEvent.srcElement; 
oEvent.time=(new Date()).getTime(); 
} 
return oEvent; 
}, 
getEvent:function(){ 
if(window.event){ 
return this.formatEvent(window.event); 
}else{ 
return EventUtil.getEvent.caller.arguments[0]; 
} 
} 
} 
window.onload=function(){ 
var oDiv=document.getElementById("div1"); 
EventUtil.addEventHandler(oDiv,"mouseover",handleEvent); 
EventUtil.addEventHandler(oDiv,"mouseout",handleEvent); 
EventUtil.addEventHandler(oDiv,"mousedown",handleEvent); 
EventUtil.addEventHandler(oDiv,"mouseup",handleEvent); 
EventUtil.addEventHandler(oDiv,"click",handleEvent); 
EventUtil.addEventHandler(oDiv,"dblclick",handleEvent); 
} 
function handleEvent(){ 
var oEvent=EventUtil.getEvent(); 
var oTextbox=document.getElementById("txt1"); 
oTextbox.innerHTML+=" 
>"+oEvent.type; 
oTextbox.innerHTML+=" 
target is "+oEvent.target.tagName; 
if(oEvent.relatedTarget){ 
oTextbox.innerHTML+=" 
relateTarget is "+oEvent.relatedTarget.tagName; 
} 
} 
// ]]> 
Use your mouse to click and double click the red square. 
Test

作者:Artwl
出处:http://artwl.cnblogs.com
Javascript 相关文章推荐
JQuery 学习笔记 选择器之五
Jul 23 Javascript
使用Jquery实现点击文字后变成文本框且可修改
Sep 21 Javascript
jquery实现图片翻页效果
Dec 23 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 Javascript
jQuery插件formValidator实现表单验证
May 23 Javascript
jQuery多级联动下拉插件chained用法示例
Aug 20 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
vue 子组件向父组件传值方法
Feb 26 Javascript
深入浅析js原型链和vue构造函数
Oct 25 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
Mar 29 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
VUE中setTimeout和setInterval自动销毁案例
Sep 07 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
Aug 14 #Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
Aug 14 #Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
Aug 14 #Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
Aug 14 #Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 #Javascript
jQuery 1.8 Release版本发布了
Aug 14 #Javascript
常用一些Javascript判断函数
Aug 14 #Javascript
You might like
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
php生成局部唯一识别码LUID的代码
2012/10/06 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
PHP框架laravel的.env文件配置教程
2017/06/07 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
php实现的顺序线性表示例
2019/05/04 PHP
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
2010/03/01 Javascript
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
js中关于String对象的replace使用详解
2011/05/24 Javascript
为指定的元素添加遮罩层的示例代码
2014/01/15 Javascript
ie9 提示'console' 未定义问题的解决方法
2014/03/20 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
2017/06/04 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
2019/08/11 Javascript
JS数据类型分类及常用判断方法
2020/11/19 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
简单了解python单例模式的几种写法
2019/07/01 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
基于django 的orm中非主键自增的实现方式
2020/05/18 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
Web页面中八种创建多列等高(等高列布局)的实现技术
2012/12/24 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
资产评估专业学生的自我鉴定
2013/11/14 职场文书
会计岗位描述
2014/02/22 职场文书
材料员岗位职责
2014/03/13 职场文书
家属慰问信
2015/02/14 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL
Redis性能监控的实现
2021/07/09 Redis