JavaScript Advanced Programming Reading Notes (18) js cross-platform events_javascript skills

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