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

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

测试

复制代码 代码如下:

<script> <BR>var EventUtil={ <BR>addEventHandler:function(oTarget, sEventType, fnHandler){ <BR>if(oTarget.addEventListener){ <BR>oTarget.addEventListener(sEventType,fnHandler,false); <BR>} else if(oTarget.attachEvent){ <BR>oTarget.attachEvent("on"+sEventType,fnHandler); <BR>} else{ <BR>oTarget["on"+sEventType]=fnHandler; <BR>} <BR>}, <BR>removeEventHandler:function(oTarget, sEventType, fnHandler){ <BR>if(oTarget.removeEventListener){ <BR>oTarget.removeEventListener(sEventType,fnHandler); <BR>} else if(oTarget.detachEvent){ <BR>oTarget.detachEvent("on"+sEventType,fnHandler); <BR>} else{ <BR>oTarget["on"+sEventType]=null; <BR>} <BR>}, <BR>formatEvent:function(oEvent){ <BR>var isIE=/msie/i.test(navigator.userAgent), <BR>isWin=/win/i.test(navigator.userAgent); <BR>if(isIE && isWin){ <BR>oEvent.charCode=(oEvent.type == "keypress")?oEvent.keyCode:0; <BR>oEvent.eventPhase =2; <BR>oEvent.isChar=(oEvent.charCode>0); <BR>oEvent.pageX=oEvent.clientX+document.body.scrollLeft; <BR>oEvent.pageY=oEvent.clientY+document.body.scrollTop; <BR>oEvent.preventDefault=function(){ <BR>this.returnvalue=false; <BR>} <BR>if(oEvent.type == "mouseout"){ <BR>oEvent.relateTarget=oEvent.toElement; <BR>}else if(oEvent.type=="mouseover"){ <BR>oEvent.relatedTarget=oEvent.fromElement; <BR>} <BR>oEvent.stopPropagation=function(){ <BR>this.cancelBubble=true; <BR>} <BR>oEvent.target=oEvent.srcElement; <BR>oEvent.time=(new Date()).getTime(); <BR>} <BR>return oEvent; <BR>}, <BR>getEvent:function(){ <BR>if(window.event){ <BR>return this.formatEvent(window.event); <BR>}else{ <BR>return EventUtil.getEvent.caller.arguments[0]; <BR>} <BR>} <BR>} <BR>EventUtil.addEventHandler(window,"load",function(){ <BR>var oDiv=document.getElementById("div1"); <BR>EventUtil.addEventHandler(oDiv,"mouseover",handleEvent); <BR>EventUtil.addEventHandler(oDiv,"mouseout",handleEvent); <BR>EventUtil.addEventHandler(oDiv,"mousedown",handleEvent); <BR>EventUtil.addEventHandler(oDiv,"mouseup",handleEvent); <BR>EventUtil.addEventHandler(oDiv,"click",handleEvent); <BR>EventUtil.addEventHandler(oDiv,"dblclick",handleEvent); <BR>}); <BR>function handleEvent(){ <BR>var oEvent=EventUtil.getEvent(); <BR>var oTextbox=document.getElementById("txt1"); <BR>oTextbox.value+="\n>"+oEvent.type; <BR>oTextbox.value+="\n target is "+oEvent.target.tagName; <BR>if(oEvent.relatedTarget){ <BR>oTextbox.value+="\n relateTarget is "+oEvent.relatedTarget.tagName; <BR>} <BR>} <BR></script>

Use your mouse to click and double click the red square.

Test

// 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