三爪的JS奋斗史---事件
1. 5JavaScript与HTML之间的交互是通过用户和浏览器操作页面时引发的事件（event）来处理的
2. 事件流 冒泡（IE）捕捉（NN） DOM事件流 同时支持两种事件流。
3. 事件发生顺序是浏览器事件支持的主要差别
4. DOM事件模型最独特的性质是，文本节点也触发事件
5. 事件是用户或浏览器自身进行的特定行为.这些事件都有自己的名字，如click,load,mouseover。用于响应某个事件而调用的函数称为 事件处理函数（event handler）
或者DOM称之为 事件监听函数（event listener）
6. 将函数赋值给对应的事件处理函数属性，事件处理函数的名称必须小写，才能正确响应。
直接赋值事件处理函数 是另一种addEventListener()的调用方式，但直接复制与函数复制有一个很重要的不同点：后续对事件处理函数的赋值清除前面的赋值
7. 事件对象(Event)
刚刚发生的时间的信息会产生事件对象，里面包含的信息有：
引起事件的对象
事件发生时鼠标的信息
事件发生时键盘的信息
事件对象只在发生事件时才被创建，且只有事件处理函数才能访问.所有事件处理函数执行完毕后，事件对象被销毁
DOM event对象必须作为唯一的参数传给事件处理函数
8. 事件的类型
根据触发事件的事物和事件发生的对象，可将浏览器中发生的时间分成几个类型
DOM定义一下事件
鼠标事件：使用数遍进行特定操作时触发.
鼠标事件是WEB上最常用的事件类型.包含了
Click --- 点击鼠标左键时发生，当用户的焦点在按钮上，并按了回车键，同样会触发这个事件.
dblclick --- 双击鼠标左键时发生.
Mousedown --- 点击任意一个鼠标按钮时发生
Mouseout --- 鼠标指针在某个元素上，且用户正要将其移出元素的边界时发生
Mouseover --- 鼠标移出某个元素到另一个元素上时发生
Mouseup --- 用户松开任意一个按钮时发生
事件处理函数被认为是分配给对象的方法
鼠标的属性
每个鼠标事件都会给以下event对象的属性填入值
坐标属性（如clientX 和 client 等）
Type属性
Targer(DOM)或serElement（IE）属性（目标对象属性）
shiftKey、ctrlKey、altKey和metaKey（DOM）属性
button属性（只在mouse事件中）
（oEvent.target || oEvent.srcElement）.id
逻辑符或操作符作用于两个对象时，第一个对象非空，返回第一个对象，否则返回第二个对象
键盘事件：用户在键盘上敲击，输入时触发.
Keydown --- 在键盘上按下某按键时发生。一直按着某键，它则会不断触发
Keypress --- 按下一个按键，并产生一个字符时产生（也就是不管类似Shit ctrl alt之类的键。）一直按键时，它会持续发生
Keyup --- 释放按着的按键时发生
1. 事件的属性
keyCode属性（键位的ASC码值）
charCode属性（仅DOM）
target 与srcElement 属性
shiftKey 、ctrlKey、altKey和metaKey（DOM）属性
HTML事件：窗口发生变动或发生特定的客户端-服务器端时触发.
Load事件：页面完全载入后，在window对象上触发；所有的框架都载入后，在框架集上触发；
<img/>完全载入后，在其上触发；或对于<object/>元素,当其完全载入后在其上触发
Unload事件：页面、框架、<img/>、<object/>卸载后，对象上触发；
Abort事件: 用户停止下载过程时，如果<object/>对象还未完全载入，就在其上触发.
Error事件：JS脚本出错时。在window对象上触发；某个<img/>的指定图像无法载入时，在其上触发；或<object/>元素无法载入时触发;或者框架集中的一个或多个框架无法载入时触发。
Select事件：用户选择了文本框中的一个或多个字符时触发
Change事件：文本框(<input/>或者<textarea/>)失去焦点时并且在它获取焦点后内容发生过改变时触发；某个 <select/>元素的值发生改变时触发.
Submit事件：点击提交按钮，在<form/>上触发.
Reset事件： 点击重置按钮时，在<form/>上触发
Resize事件：窗口或框架的大小发生改变时触发
Scroll事件： 用户在任何带滚动条的元素上卷动它时触发
Focus事件： 任何元素或者窗口本身获取焦点时（点击，tab键切换或者任何与它交互的手段）时触发
Blur事件： 任何元素或者窗口本身失去焦点时触发
突变事件：底层的DOM结构发生改变时触发.
暂无主流浏览器支持.很明显，偷懒了
跨平台的事件
很明显重点来了.
先提供一个浏览器与操作系统判断JS //detect.js，来自《JAVASCRIPT高级程序设计》
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;
}
}
//eventutil.js，来自《JAVASCRIPT高级程序设计》
var EventUtil = new Object;
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;
}
}
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;
}
}
EventUtil.formatEvent = function (oEvent){
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;
}else if(oEvent.type == "mouseover"){
oEvent.relatedTarget = oEvent.fromElement;
}
oEvent.stopPropagation = function(){
this.cancelBubble = true;
}
oEvent.target = oEvent.srcElement;
oEvent.time = (new Date()).getTime();
}
return oEvent;
}
EventUtil.getEvent = function(){
if(window.event){
return this.formatEvent(window.event);
}else{
return EventUtil.getEvent.caller.arguments[0];
}
}
浙公网安备 33010602011771号