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 操作option的实现代码
Mar 03 Javascript
关于URL中的特殊符号使用介绍
Nov 03 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
javascript里使用php代码实例
Dec 13 Javascript
javascript验证身份证号
Mar 03 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
Dec 03 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 Javascript
微信小程序适配iphoneX的实现方法
Sep 18 Javascript
最简单的JS实现json转csv的方法
Jan 10 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 Javascript
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
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
PHP最常用的2种设计模式工厂模式和单例模式介绍
2012/08/14 PHP
关于shopex同步ucenter的redirect问题,导致script不运行
2013/04/10 PHP
php封装单文件上传到数据库(路径)
2017/10/15 PHP
php实现小程序支付完整版
2018/10/09 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
浅谈javascript 面向对象编程
2009/10/28 Javascript
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
jQuery中add()方法用法实例
2015/01/08 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
Vue.js路由vue-router使用方法详解
2017/03/20 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
2019/05/10 Javascript
微信小程序-API接口安全详解
2019/07/16 Javascript
vue 解除鼠标的监听事件的方法
2019/11/13 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
python私有属性和方法实例分析
2015/01/15 Python
使用python调用zxing库生成二维码图片详解
2017/01/10 Python
Python爬虫包BeautifulSoup异常处理(二)
2018/06/17 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
python zip,lambda,map函数代码实例
2020/04/04 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物
Hello Molly美国:女性时尚在线
2019/08/26 全球购物
银行自荐信范文
2013/10/07 职场文书
通信工程毕业生自荐信
2013/11/01 职场文书
飘柔洗发水广告词
2014/03/14 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
2015年民兵整组工作总结
2015/07/24 职场文书