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 相关文章推荐
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
Nov 30 Javascript
两个比较有用的Javascript工具函数代码
Feb 17 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
May 25 Javascript
JavaScript flash复制库类 Zero Clipboard
Jan 17 Javascript
5个javascript的数字格式化函数分享
Dec 07 Javascript
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
Jul 07 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
Mar 02 Javascript
vue的Virtual Dom实现snabbdom解密
May 03 Javascript
解决vuex刷新数据消失问题
Nov 12 Javascript
jquery插件实现图片悬浮
Apr 16 jQuery
详细聊聊浏览器是如何看闭包的
Nov 11 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
SONY SRF-40W电路分析
2021/03/02 无线电
基于PHP异步执行的常用方式详解
2013/06/03 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
php ajax异步读取rss文档数据
2016/03/29 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
ArrayList类(增强版)
2007/04/04 Javascript
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
2018/01/31 Javascript
详解webpack 热更新优化
2018/09/13 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
Python爬取qq music中的音乐url及批量下载
2017/03/23 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
NBA欧洲商店(英国):NBA Europe Store UK
2018/07/27 全球购物
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
中科创达面试题
2016/12/28 面试题
大一自我鉴定范文
2013/10/04 职场文书
总经理办公室主任岗位职责
2013/11/12 职场文书
给女朋友的道歉信
2014/01/10 职场文书
个人借款担保书
2014/04/02 职场文书
应届生自荐信
2014/06/30 职场文书
会员活动策划方案
2014/08/19 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
工程部文员岗位职责
2015/02/04 职场文书
教师学习十八届五中全会精神心得体会
2016/01/05 职场文书
实现一个简单得数据响应系统
2021/11/11 Javascript