《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]; } } }
测试
<!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>
Use your mouse to click and double click the red square.
Test
