事件在DOM结构中传播的顺序叫事件流，分三个阶段：事件捕获、事件发生、事件冒泡
现代浏览器事件冒泡一直冒到window身上，事件捕获也延伸到window开始
事件级别
- HTML事件 onclick = "showAlert(event)"
- DOM0级事件 div.onclick = function(){}
- DOM2级事件 addEventListen
事件的分类
UI事件、焦点事件、鼠标事件、滚轮事件、文本事件、键盘事件、设备事件。
UI事件指的是那些不一定与用户操作有关的事件。包括：
- load 当页面完全加载后(包括所有图像、Javascript文件、CSS文件等外部资源）就会触发window身上的load事件。当我们为image图像指定事件时，需要先指定事件，然后设置 src 才能在图像加载完毕触发事件，否则不能生效。
- unload window身上
- abort
- error window身上
- select 表单元素
- resize window身上
- scroll window和body身上触发，有兼容性问题，
焦点事件
- focus 不冒泡
- blur 不冒泡
- focusin 冒泡
- focusout 冒泡
鼠标事件与滚轮事件
- click
- dbclick
- mousedown
- mouseenter 鼠标光标从元素外部首次移动到元素范围之内时触发，不冒泡，而且移动到后代元素上也不触发
- mouseleave 在位于元素上方的鼠标光标移动到元素范围之外时触发，不冒泡，而且光标移动到后代元素上不会触发
- mousemove 光标在元素内部移动时重复地触发。
- mouseout 在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。一个元素可能位于前一个元素的外部，也可能是这个元素的子元素
- mouseover 在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内触发
- mouseup
客户区座标
- event.clientX
- event.clientY
- event.pageX IE8下需要采用折衷方案计算出来scrollLeft 和scrollTop
- event.pageY
- event.screenX
- event.screenY
iOS 和 Andriod 特殊处理
- 不支持dbclick
- 轻击可单击元素会触发mousemove事件。如果此操作会导致内容滚变化，将不再有其他事件法身滚；如果屏幕没有因此变化，那么一次会发生mousedown mouseup click 事件。轻击不可单击的元素不会触发任何事件。可单击的元素指那些淡季可产生默认操作的元素，或这那些已经被指定了onclick事件处理程序的元素。
- mousemove事件也会触发mouseover 和 mouseout 事件
- 两个手指放在屏幕上且页面随手指移动二滚动时会触发mousewheel 和 scroll事件。
键盘事件
- keydown 按下任意键时触发，一直按下，一直触发，文本框变化前
- keypress 按下任意键时触发，一直按下，一直触发，文本框变化前
- keyup
- textInput 用户在可编辑区域中输入字符时触发，退格键，button身上的都不能触发
contentmenu事件 在呼出快捷菜单时触发，具体可以参见范例。
DOMContentLoaded事件 DOM树加载完毕后触发，document身上或者window身上
pageshow 在页面onload之后触发，切换标签从缓存中读取时也会触发
pagehide
hashchange URL的参数列表发生变化时通知开发人员。window对象
设备事件
- orientationchange事件 window身上，苹果ios系统 0 90 -90
- deviceorientation xyz轴，
触摸手势事件
touchstart 冒泡
touchmove 冒泡
touchend 冒泡
touchcancel 冒泡
以上事件的事件对象中不仅包括clientX等参数，还包括touches targetTouchs changeTouches等属性
touches 表示当前跟踪的触摸操作的Touch对象的数组
targetTouchs 特定与事件目标的Touch对象数组
changeTouches 表示自上此触摸以来发生了什么改变的Touch对象的数组
手势事件
- gesturestart 当一个手指已经安在屏幕上，另一个手指有触摸屏幕时触发
- gesturechange 当触摸屏上任意一个手指位置发生变化时触发
- gestureend 当任何一个手指从屏幕上面移开时触发
事件委托
- 利用事件冒泡和target来获取对应的元素
- 移除事件处理程序
//scroll事件的触发
EventUtil.addHandler(window,"scroll",function (event) {
if(document.compatMode == "CSS1Compat"){
alert(document.documentElement.scrollTop);
}else {
alert(document.body.scrollTop);
}
})
//计算IE8下pageX和pageY
//修改键
//快捷菜单范例
//跨浏览器事件解决方案
var EventUtil = {
//添加事件
addHandler: function (element,type,handler) {
if(element.addEventListener){
element.addEventListener(type,handler,false);
} else if (element.attachEvent){
element.attachEvent("on" + type,handler);
} else {
element["on" + type] = hanlder;
}
},
//移除事件
removeHandler: function (element, type, hanlder) {
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on" + type, hanlder);
} else {
element["on" + type] = null;
}
},
//获取事件对象
getEvent: function (event) {
return event ? event : window.event;
},
//获取事件发生时的目标对象
getTarget: function (event) {
return event.target || event.srcElement;
},
//事件发生时阻止默认行为
preventDefault: function (event) {
if(event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
},
//事件发生时阻止事件冒泡和捕获
stopPropagation: function (event) {
if(event.stopPropagation){
event.stopPropagation();
}else {
event.cancelBubble = true;
}
},
//当事件为mouseover和mouseout时，事件对象中会有相关元素，这里就是获取相关元素
getRelatedTarget: function (event) {
if(event.relatedTarget){
return event.relatedTarget;
}else if (event.toElement) {
return event.toElement;
}else if(event.fromElement) {
return event.fromElement;
}else {
return null;
}
},
//获取鼠标点击时，用的是哪个按键
getButton: function (event) {
if(document.implementation.hasFeature("MouseEvents","2.0")){
return event.button;
} else {
switch (event.button) {
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4:
return 1;
}
}
},
//获取鼠标滚轮滚动的方向，120为向上滚，-120为向下滚
getWheelDelta: function (event) {
if(event.wheelDelta){
return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta: event.wheelDelta)
} else {
return -event.detail * 40;
}
},
//获取按键的编码
getCharCode: function (event) {
if(typeof event.charCode == "number"){
return event.charCode;
}else {
return event.keyCode;
}
},
//获取剪切板内容
getClipboardText: function (event) {
var clipboardData = (event.clipboardData || window.clipboardData);
return clipboardData.getData("text");
},
//设置剪切板内容
setClipboardText: function (event) {
if(event.clipboardData){
return event.clipboardData.setData("text/plain",value);
} else if (window.clipboardData){
return window.clipboardData.setData("text",value);
}
}
};
