JavaScript 高度なプログラミング読書メモ (18) js クロスプラットフォーム イベント_javascript スキル

跨平台のEventEventUtil对象
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.popularTarget=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.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.popularTarget=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");
EventUtil.addEventHandler (oDiv,"mouseover",handleEvent);
EventUtil.addEventHandler(oDiv,"mouseout",handleEvent);
EventUtil.addEventHandler(oDiv,"mousedown",handleEvent); ,"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>" oイベント.タイプ;
oTextbox.value ="n ターゲットは " oEvent.target.tagName;
if(oEvent.popularTarget){
oTextbox.value ="n 関連ターゲットは " oEvent.popularTarget.tagName;
}
}

マウスを使用して赤い四角をクリックし、ダブルクリックします。

テスト

// 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.popularTarget=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];
}
}
}
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 ="
>" oイベント.タイプ;
oTextbox.innerHTML ="
ターゲットは " oEvent.target.tagName;
if(oEvent.popularTarget){
oTextbox.innerHTML ="
relateTarget は " oEvent.popularTarget.tagName;
}
}
// ]]>
マウスを使用して赤い四角をクリックし、ダブルクリックします。
テスト


作者：Artwl

出处：http://artwl.cnblogs.com