JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012-08-14 00:00
453 查看
跨平台的事件EventUtil对象
EventUtil:
测试
作者:Artwl
出处:http://artwl.cnblogs.com
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高级程序设计 阅读笔记(十八) js跨平台的事件
- JavaScript高级程序设计 阅读笔记(十七) js事件
- JavaScript高级程序设计 阅读笔记(十七) js事件
- JavaScript高级程序设计 阅读笔记(十九) js表格排序
- JavaScript高级程序设计(第3版)阅读笔记第02天-js基本概念
- JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
- JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
- JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
- JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
- JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
- JavaScript高级程序设计(第3版)阅读笔记第01天-js简介
- JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
- JavaScript高级程序设计 阅读笔记(十九) js表格排序
- JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
- JavaScript高级程序设计 阅读笔记(二十) js错误处理
- JavaScript高级程序设计 阅读笔记(二十) js错误处理
- js-JavaScript高级程序设计学习笔记7
- JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
- JavaScript高级程序设计(第3版)学习笔记6 初识js对象