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的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
May 24 Javascript
jquery禁止回车触发表单提交
Dec 12 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
jQuery动画效果相关方法实例分析
Dec 31 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
Mar 01 Javascript
javascript的document中的动态添加标签实现方法
Oct 24 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 Javascript
巧用weui.topTips验证数据的实例
Apr 17 Javascript
利用JS测试目标网站的打开响应速度
Dec 01 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
vue单元格多列合并的实现
Nov 26 Vue.js
微信小程序实现购物车小功能
Dec 30 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
php4的session功能评述(二)
2006/10/09 PHP
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
利用javascript查看html源文件
2006/11/08 Javascript
javascript检查日期格式的函数[比较全]
2008/10/17 Javascript
Javascript 面向对象之重载
2010/05/04 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
javascript闭包传参和事件的循环绑定示例探讨
2014/04/17 Javascript
深入理解Javascript中的自执行匿名函数
2016/06/03 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
react实现换肤功能的示例代码
2018/08/14 Javascript
vue实现倒计时获取验证码效果
2020/04/17 Javascript
python获取android设备的GPS信息脚本分享
2015/03/06 Python
python中根据字符串调用函数的实现方法
2016/06/12 Python
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
python查看模块,对象的函数方法
2018/10/16 Python
python实现图片转字符小工具
2019/04/30 Python
python对数组进行排序,并输出排序后对应的索引值方式
2020/02/28 Python
Python3 pickle对象串行化代码实例解析
2020/03/23 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
全球虚拟主机商:HostGator
2017/02/06 全球购物
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
Linux管理员面试经常问道的相关命令
2013/04/29 面试题
建筑学推荐信
2013/11/03 职场文书
办公室副主任岗位职责
2013/11/25 职场文书
租车协议书范本2014
2014/11/17 职场文书
实习计划书范文
2015/01/16 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android