javascript事件处理模型实例说明

内容摘要
事件(Event)是JavaScript应用跳动的心脏 ，也是把所有东西粘在一起的胶水。当我们与浏览器中 Web 页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击
文章正文

事件(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(){
    ver oevent = window.event; //作为window的一个属性
}

FF：

复制代码 代码如下:
op.onClick=function(oevent){
    ....  //通过传入参数来控制
}

通用：

复制代码 代码如下:
op.onClick=function(oevent){
    if(window.event){
        oevent=window.event;
    }
}

//即时得到了通用的，但是他们返回对象的属性和方法也不尽一致，但可以使用通过EventUtil来解决！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
var EventUtil = new Object;
/**//*
  此方法用来给特定对象添加事件，oTarget是指定对象,sEventType是事件类型，如click、keydown等，   fnHandler是事件回调函数
*/
EventUtil.addEventHandler = function (oTarget, sEventType, fnHandler) {
   //firefox情况下
   if (oTarget.addEventListener) {
     oTarget.addEventListener(sEventType, fnHandler, false);
   }
   //IE下
   else if (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);
   } else if (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;
     } else if (oEvent.type == "mouseover") {
       oEvent.relatedTarget = oEvent.fromElement;
     }
     //取消冒泡  
     oEvent.stopPropagation = function () {
       this.cancelBubble = true;
     };
 
     oEvent.target = oEvent.srcElement;
     //添加事件发生时间属性，IE没有
     oEvent.time = (new Date).getTime();
   }
   return oEvent;
};
 
EventUtil.getEvent = function() {
   if (window.event) {
     //格式化IE的事件
     return this.formatEvent(window.event);
   } else {
     return EventUtil.getEvent.caller.arguments[0];
   }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
/*
*附带上一个判断浏览器和系统类型的js文件，通过引入一些名字显而易见的全局变量作为判断的结果，使用时需要小心变量名称冲突：
*/
var sUserAgent = navigator.userAgent;
var fAppVersion = parseFloat(navigator.appVersion);
 
function compareVersions(sVersion1, sVersion2) {
 
  var aVersion1 = sVersion1.split(".");
  var aVersion2 = sVersion2.split(".");
   
  if (aVersion1.length > aVersion2.length) {
    for (var i=0; i < aVersion1.length - aVersion2.length; i++) {
      aVersion2.push("0");
    }
  } else if (aVersion1.length < aVersion2.length) {
    for (var i=0; i < aVersion2.length - aVersion1.length; i++) {
      aVersion1.push("0");
    } 
  }
   
  for (var i=0; i < aVersion1.length; i++) {
  
    if (aVersion1[i] < aVersion2[i]) {
      return -1;
    } else if (aVersion1[i] > aVersion2[i]) {
      return 1;
    } 
  }
   
  return 0;
 
}
 
var isOpera = sUserAgent.indexOf("Opera") > -1;
var isMinOpera4 = isMinOpera5 = isMinOpera6 = isMinOpera7 = isMinOpera7_5 = false;
 
if (isOpera) {
  var fOperaVersion;
  if(navigator.appName == "Opera") {
    fOperaVersion = fAppVersion;
  } else {
    var reOperaVersion = new RegExp("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;
}
 
var isKHTML = sUserAgent.indexOf("KHTML") > -1
       || sUserAgent.indexOf("Konqueror") > -1
       || sUserAgent.indexOf("AppleWebKit") > -1;
        
var isMinSafari1 = isMinSafari1_2 = false;
var isMinKonq2_2 = isMinKonq3 = isMinKonq3_1 = isMinKonq3_2 = false;
 
if (isKHTML) {
  isSafari = sUserAgent.indexOf("AppleWebKit") > -1;
  isKonq = sUserAgent.indexOf("Konqueror") > -1;
 
  if (isSafari) {
    var reAppleWebKit = new RegExp("AppleWebKit///(//d+(?://.//d*)?)");
    reAppleWebKit.test(sUserAgent);
    var fAppleWebKitVersion = parseFloat(RegExp["$1"]);
 
    isMinSafari1 = fAppleWebKitVersion >= 85;
    isMinSafari1_2 = fAppleWebKitVersion >= 124;
  } else if (isKonq) {
 
    var reKonq = new RegExp("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;
  }
   
}
 
var isIE = sUserAgent.indexOf("compatible") > -1
      && sUserAgent.indexOf("MSIE") > -1
      && !isOpera;
       
var isMinIE4 = isMinIE5 = isMinIE5_5 = isMinIE6 = false;
 
if (isIE) {
  var reIE = new RegExp("MSIE (//d+//.//d+);");
  reIE.test(sUserAgent);
  var fIEVersion = parseFloat(RegExp["$1"]);
 
  isMinIE4 = fIEVersion >= 4;
  isMinIE5 = fIEVersion >= 5;
  isMinIE5_5 = fIEVersion >= 5.5;
  isMinIE6 = fIEVersion >= 6.0;
}
 
var isMoz = sUserAgent.indexOf("Gecko") > -1
      && !isKHTML;
 
var isMinMoz1 = sMinMoz1_4 = isMinMoz1_5 = false;
 
if (isMoz) {
  var reMoz = new RegExp("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;
}
 
var isNS4 = !isIE && !isOpera && !isMoz && !isKHTML
      && (sUserAgent.indexOf("Mozilla") == 0)
      && (navigator.appName == "Netscape")
      && (fAppVersion >= 4.0 && fAppVersion < 5.0);
 
var isMinNS4 = 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;
}
 
var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC")
      || (navigator.platform == "Macintosh");
 
var isUnix = (navigator.platform == "X11") && !isWin && !isMac;
 
var isWin95 = isWin98 = isWinNT4 = isWin2K = isWinME = isWinXP = false;
var isMac68K = isMacPPC = false;
var isSunOS = isMinSunOS4 = isMinSunOS5 = isMinSunOS5_5 = false;
 
if (isWin) {
  isWin95 = sUserAgent.indexOf("Win95") > -1
       || sUserAgent.indexOf("Windows 95") > -1;
  isWin98 = sUserAgent.indexOf("Win98") > -1
       || sUserAgent.indexOf("Windows 98") > -1;
  isWinME = sUserAgent.indexOf("Win 9x 4.90") > -1
       || sUserAgent.indexOf("Windows ME") > -1;
  isWin2K = sUserAgent.indexOf("Windows NT 5.0") > -1
       || sUserAgent.indexOf("Windows 2000") > -1;
  isWinXP = sUserAgent.indexOf("Windows NT 5.1") > -1
       || sUserAgent.indexOf("Windows XP") > -1;
  isWinNT4 = sUserAgent.indexOf("WinNT") > -1
       || sUserAgent.indexOf("Windows NT") > -1
       || sUserAgent.indexOf("WinNT4.0") > -1
       || sUserAgent.indexOf("Windows NT 4.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) {
    var reSunOS = new RegExp("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事件处理，希望能给大家一个参考，也希望大家多多支持phpstudy。
代码注释
上一篇解析Android开发优化之:对Bitmap的内存优化详解下一篇win10 Realtek HD Audio更新失败怎么办 win10关闭UAC解决Realtek HD Audio更新失败

作者：喵哥笔记

IDC笔记

学的不仅是技术，更是梦想！