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

156 阅读 0 评论 103 点赞

我是靠谱客的博主追寻钢笔，最近开发中收集的这篇文章主要介绍JavaScript高级程序设计阅读笔记（十八） js跨平台的事件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

跨平台的事件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 