JavaScript 고급 프로그래밍 읽기 노트(18) js 크로스 플랫폼 events_javascript 기술

跨平台的事件 eventUtil il
eventUl :

代码如下 代码如下 :

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.관련Target=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];
}
}
}

测试

复主代码 代码如下:

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.관련Target=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 handlerEvent(){
var oEvent=EventUtil.getEvent();
var oTextbox=document.getElementById("txt1");
oTextbox.value ="n>" o이벤트.유형;
oTextbox.value ="n 대상은 " oEvent.target.tagName;
if(oEvent.관련Target){
oTextbox.value ="n 관계 타겟은 " oEvent.관련Target.tagName;
}
}

마우스를 사용해 빨간색 사각형을 클릭한 후 더블클릭하세요.

테스트