Javascript学习笔记之事件篇

//定义EventUtil对象
varEventUtil=newObject;

//添加事件处理
EventUtil.addEventHandler=function(oTarget,sEventType,fnHandler){
if(oTarget.addEventListener){//firefox
oTarget.addEventListener(sEventType,fnHandler,false);
}elseif(oTarget.attachEvent){//IE
oTarget.attachEvent("on"+sEventType,fnHandler);
}else{//others
oTarget["on"+sEventType]=fnHandler;
}
};

//删除事件处理
EventUtil.removeEventHandler=function(oTarget,sEventType,fnHandler){
if(oTarget.removeEventListener){//firefox
oTarget.removeEventListener(sEventType,fnHandler,false);
}elseif(oTarget.detachEvent){//IE
oTarget.detachEvent("on"+sEventType,fnHandler);
}else{//others
oTarget["on"+sEventType]=null;
}
};

//事件格式化，将IE下的对象尽可能的调整为DOM的事件模型
EventUtil.formatEvent=function(oEvent){
varisIE=Validate_Browser("ie");
varisWin=Validate_System("win");

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.relatedTarget=oEvent.toElement;
}elseif(oEvent.Type=="mouseover"){
oEvent.relatedTarget=oEvent.fromElement;
}

oEvent.stopPropagation=function(){
this.cancelBubble=true;
};

oEvent.target=oEvent.srcElement;
oEvent.time=(newDate()).getTime();
}
returnoEvent;
};

//获得事件对象
EventUtil.getEvent=function(){
if(window.event){
returnthis.formatEvent(window.event);
}else{
returnEventUtil.getEvent.caller.arguments[0];
}
};

//加载窗体的同时，给对象附加事件处理函数
EventUtil.addEventHandler(window,"load",function(){
varoDiv=document.getElementById("divObj");
varoDivDel=document.getElementById("divDel");

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);
EventUtil.addEventHandler(oDivDel,"click",RemoveEvent);
});

functionRemoveEvent(){
varoDiv=document.getElementById("divObj");
varoDivDel=document.getElementById("divDel");

EventUtil.removeEventHandler(oDiv,"mouseover",handleEvent);
EventUtil.removeEventHandler(oDiv,"mouseout",handleEvent);
EventUtil.removeEventHandler(oDiv,"mousedown",handleEvent);
EventUtil.removeEventHandler(oDiv,"mouseup",handleEvent);
EventUtil.removeEventHandler(oDiv,"click",handleEvent);
EventUtil.removeEventHandler(oDiv,"dblclick",handleEvent);
EventUtil.removeEventHandler(oDivDel,"click",RemoveEvent);
varoTextMsg=document.getElementById("oTextMsg");

oTextMsg.value="附加事件已经清除";

}

functionhandleEvent(){
try{
varoEvent=EventUtil.getEvent();
varoTextMsg=document.getElementById("oTextMsg");
oTextMsg.value="";
oTextMsg.value+="/n>"+oEvent.type;
oTextMsg.value+="/n		targetis"+oEvent.target.tagName;

if(oEvent.relatedTarget){
oTextMsg.value+="/n		relatedTargetis"+oEvent.relatedTarget.tagName;
}
}catch(e){
alert(e.toString());
//这个异常，等待解决
}
}

下面放入HTML代码

<divstyle="background:#336600;width:200px;"id="divObj">AddEvent</div>
<divstyle="background:#99FF00;width:200px;"id="divDel">RemoveEvent(whenonclick)</div>
<textareaid="oTextMsg"cols="60"rows="10"></textarea>