JavaScript高階程式設計 閱讀筆記（十八） js跨平台的事件_javascript技巧

跨平台的事件EventUtil物件

複製代碼代碼如下：

var >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(sfn.removeEventListener){
oTarget.removeEventListener(sfnType,Handler);
} 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.latedTarget=oEvent.fromElement;
}
oEvent.stopPropagation=function(){
this.cancelBubble=true;
}
oEvent.target=oEvent.srcElement;
oEvent.time=(new Date()).getTime();
}
返回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.addEventListenerener){
oTarget.addEventListener(svEventType,Handler,fodse);
} else if(oTarget.attachEvent){
oTarget.attachEvent("on" sEventType,fnHandler);
} else{
oTarget["on" sEventType]=fnHandler;
}
},
removeEventHandler:function(oTarget, sEventType, fnHandler){
if(oTarget.removeEventListener){
oTarget.removeEventListener(sfn.removeEventListener){
oTarget.removeEventListener(sfnType,Handler);
} 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.latedTarget=oEvent.fromElement;
}
oEvent.stopPropagation=function(){
this.cancelBubble=true;
}
oEvent.target=oEvent.srcElement;
oEvent.time=(new Date()).getTime();
}
返回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");
Event oDiv=document.getElementById("div1");
EventUtil.EventHandler (oDiv,"mouseover",handleEvent)
EventUtil.addEventHandler(oDiv,"mouseout",handleEvent);
EventUtil.addEventHandler(oDiv,"mousedown",handleEvent);
EventUtiltil.Divdler(o.Div) ; ; ,“滑鼠放開”,handleEvent);
EventUtil.addEventHandler(oDiv,"click",handleEvent);
EventUtil.addEventHandler(oDiv,"dblclick",handleEvent);
函式handleEvent(){
var oEvent=EventUtil.getEvent();
var oTextbox=document.getElementById("txt1");
oTextbox.value ="n>" o事件類型;
oTextbox.value ="n 目標是 " oEvent.target.tagName;
if(oEvent.latedTarget){
oTextbox.value ="n 關聯目標是" oEvent.latedTarget.tagName;
}
}
腳本>
頭>

用滑鼠點選並橘色紅色方塊。

測試

;

身體>