javascript事件处理模型实例说明
事件(Event)是JavaScript应用跳动的心脏，也是把所有东西粘在一起的胶水。当我们与浏览器中Web页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是Web浏览器中发生的事情，比如说某个Web页面加载完成，或者是用户滚动窗口或改变窗口大小。
通过使用JavaScript，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应。
一、添加事件监听
IE:
attachEvent("onclick",function(){...})//添加
detachEvent("onclick",function(){...})//删除
FF:
addEventListener("click",function(){...},false)
//可以跟一个对象添加多个事件监听，跟默认的对象事件不同
removeEventListenner("click",function(){...},false)
二、得到事件对象
IE:
op.onClick=function(){
veroevent=window.event;//作为window的一个属性
}
FF：
op.onClick=function(oevent){
.... //通过传入参数来控制
}
通用：
op.onClick=function(oevent){
if(window.event){
oevent=window.event;
}
}
//即时得到了通用的，但是他们返回对象的属性和方法也不尽一致，但可以使用通过EventUtil来解决！
varEventUtil=newObject;
/**//*
此方法用来给特定对象添加事件，oTarget是指定对象,sEventType是事件类型，如click、keydown等，fnHandler是事件回调函数
*/
EventUtil.addEventHandler=function(oTarget,sEventType,fnHandler){
//firefox情况下
if(oTarget.addEventListener){
oTarget.addEventListener(sEventType,fnHandler,false);
}
//IE下
elseif(oTarget.attachEvent){
oTarget.attachEvent("on"+sEventType,fnHandler);
}
else{
oTarget["on"+sEventType]=fnHandler;
}
};
/*
此方法用来移除特定对象的特定事件，oTarget是指定对象,sEventType是事件类型，如click、keydown等，fnHandler是事件回调函数
*/
EventUtil.removeEventHandler=function(oTarget,sEventType,fnHandler){
if(oTarget.removeEventListener){
oTarget.removeEventListener(sEventType,fnHandler,false);
}elseif(oTarget.detachEvent){
oTarget.detachEvent("on"+sEventType,fnHandler);
}else{
oTarget["on"+sEventType]=null;
}
};
/*
格式化事件，因为IE和其他浏览器下获取事件的方式不同并且事件的属性也不尽相同，通过此方法提供一个一致的事件
*/
EventUtil.formatEvent=function(oEvent){
//isIE和isWin引用到一个js文件，判断浏览器和操作系统类型
if(isIE&&isWin){
oEvent.charCode=(oEvent.type=="keypress")?oEvent.keyCode:0;
//IE只支持冒泡，不支持捕获
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;
};
//将toElement,fromElement转化为标准的relatedTarget
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;
//添加事件发生时间属性，IE没有
oEvent.time=(newDate).getTime();
}
returnoEvent;
};
EventUtil.getEvent=function(){
if(window.event){
//格式化IE的事件
returnthis.formatEvent(window.event);
}else{
returnEventUtil.getEvent.caller.arguments[0];
}
};
/*
*附带上一个判断浏览器和系统类型的js文件，通过引入一些名字显而易见的全局变量作为判断的结果，使用时需要小心变量名称冲突：
*/
varsUserAgent=navigator.userAgent;
varfAppVersion=parseFloat(navigator.appVersion);
functioncompareVersions(sVersion1,sVersion2){
varaVersion1=sVersion1.split(".");
varaVersion2=sVersion2.split(".");
if(aVersion1.length>aVersion2.length){
for(vari=0;i<aVersion1.length-aVersion2.length;i++){
aVersion2.push("0");
}
}elseif(aVersion1.length<aVersion2.length){
for(vari=0;i<aVersion2.length-aVersion1.length;i++){
aVersion1.push("0");
}
}
for(vari=0;i<aVersion1.length;i++){
if(aVersion1[i]<aVersion2[i]){
return-1;
}elseif(aVersion1[i]>aVersion2[i]){
return1;
}
}
return0;
}
varisOpera=sUserAgent.indexOf("Opera")>-1;
varisMinOpera4=isMinOpera5=isMinOpera6=isMinOpera7=isMinOpera7_5=false;
if(isOpera){
varfOperaVersion;
if(navigator.appName=="Opera"){
fOperaVersion=fAppVersion;
}else{
varreOperaVersion=newRegExp("Opera(//d+//.//d+)");
reOperaVersion.test(sUserAgent);
fOperaVersion=parseFloat(RegExp["$1"]);
}
isMinOpera4=fOperaVersion>=4;
isMinOpera5=fOperaVersion>=5;
isMinOpera6=fOperaVersion>=6;
isMinOpera7=fOperaVersion>=7;
isMinOpera7_5=fOperaVersion>=7.5;
}
varisKHTML=sUserAgent.indexOf("KHTML")>-1
||sUserAgent.indexOf("Konqueror")>-1
||sUserAgent.indexOf("AppleWebKit")>-1;
varisMinSafari1=isMinSafari1_2=false;
varisMinKonq2_2=isMinKonq3=isMinKonq3_1=isMinKonq3_2=false;
if(isKHTML){
isSafari=sUserAgent.indexOf("AppleWebKit")>-1;
isKonq=sUserAgent.indexOf("Konqueror")>-1;
if(isSafari){
varreAppleWebKit=newRegExp("AppleWebKit///(//d+(?://.//d*)?)");
reAppleWebKit.test(sUserAgent);
varfAppleWebKitVersion=parseFloat(RegExp["$1"]);
isMinSafari1=fAppleWebKitVersion>=85;
isMinSafari1_2=fAppleWebKitVersion>=124;
}elseif(isKonq){
varreKonq=newRegExp("Konqueror///(//d+(?://.//d+(?://.//d)?)?)");
reKonq.test(sUserAgent);
isMinKonq2_2=compareVersions(RegExp["$1"],"2.2")>=0;
isMinKonq3=compareVersions(RegExp["$1"],"3.0")>=0;
isMinKonq3_1=compareVersions(RegExp["$1"],"3.1")>=0;
isMinKonq3_2=compareVersions(RegExp["$1"],"3.2")>=0;
}
}
varisIE=sUserAgent.indexOf("compatible")>-1
&&sUserAgent.indexOf("MSIE")>-1
&&!isOpera;
varisMinIE4=isMinIE5=isMinIE5_5=isMinIE6=false;
if(isIE){
varreIE=newRegExp("MSIE(//d+//.//d+);");
reIE.test(sUserAgent);
varfIEVersion=parseFloat(RegExp["$1"]);
isMinIE4=fIEVersion>=4;
isMinIE5=fIEVersion>=5;
isMinIE5_5=fIEVersion>=5.5;
isMinIE6=fIEVersion>=6.0;
}
varisMoz=sUserAgent.indexOf("Gecko")>-1
&&!isKHTML;
varisMinMoz1=sMinMoz1_4=isMinMoz1_5=false;
if(isMoz){
varreMoz=newRegExp("rv:(//d+//.//d+(?://.//d+)?)");
reMoz.test(sUserAgent);
isMinMoz1=compareVersions(RegExp["$1"],"1.0")>=0;
isMinMoz1_4=compareVersions(RegExp["$1"],"1.4")>=0;
isMinMoz1_5=compareVersions(RegExp["$1"],"1.5")>=0;
}
varisNS4=!isIE&&!isOpera&&!isMoz&&!isKHTML
&&(sUserAgent.indexOf("Mozilla")==0)
&&(navigator.appName=="Netscape")
&&(fAppVersion>=4.0&&fAppVersion<5.0);
varisMinNS4=isMinNS4_5=isMinNS4_7=isMinNS4_8=false;
if(isNS4){
isMinNS4=true;
isMinNS4_5=fAppVersion>=4.5;
isMinNS4_7=fAppVersion>=4.7;
isMinNS4_8=fAppVersion>=4.8;
}
varisWin=(navigator.platform=="Win32")||(navigator.platform=="Windows");
varisMac=(navigator.platform=="Mac68K")||(navigator.platform=="MacPPC")
||(navigator.platform=="Macintosh");
varisUnix=(navigator.platform=="X11")&&!isWin&&!isMac;
varisWin95=isWin98=isWinNT4=isWin2K=isWinME=isWinXP=false;
varisMac68K=isMacPPC=false;
varisSunOS=isMinSunOS4=isMinSunOS5=isMinSunOS5_5=false;
if(isWin){
isWin95=sUserAgent.indexOf("Win95")>-1
||sUserAgent.indexOf("Windows95")>-1;
isWin98=sUserAgent.indexOf("Win98")>-1
||sUserAgent.indexOf("Windows98")>-1;
isWinME=sUserAgent.indexOf("Win9x4.90")>-1
||sUserAgent.indexOf("WindowsME")>-1;
isWin2K=sUserAgent.indexOf("WindowsNT5.0")>-1
||sUserAgent.indexOf("Windows2000")>-1;
isWinXP=sUserAgent.indexOf("WindowsNT5.1")>-1
||sUserAgent.indexOf("WindowsXP")>-1;
isWinNT4=sUserAgent.indexOf("WinNT")>-1
||sUserAgent.indexOf("WindowsNT")>-1
||sUserAgent.indexOf("WinNT4.0")>-1
||sUserAgent.indexOf("WindowsNT4.0")>-1
&&(!isWinME&&!isWin2K&&!isWinXP);
}
if(isMac){
isMac68K=sUserAgent.indexOf("Mac_68000")>-1
||sUserAgent.indexOf("68K")>-1;
isMacPPC=sUserAgent.indexOf("Mac_PowerPC")>-1
||sUserAgent.indexOf("PPC")>-1;
}
if(isUnix){
isSunOS=sUserAgent.indexOf("SunOS")>-1;
if(isSunOS){
varreSunOS=newRegExp("SunOS(//d+//.//d+(?://.//d+)?)");
reSunOS.test(sUserAgent);
isMinSunOS4=compareVersions(RegExp["$1"],"4.0")>=0;
isMinSunOS5=compareVersions(RegExp["$1"],"5.0")>=0;
isMinSunOS5_5=compareVersions(RegExp["$1"],"5.5")>=0;
}
}
以上就是js事件处理，希望能给大家一个参考，也希望大家多多支持毛票票。