事件在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 事件。輕擊不可單擊的元素不會觸發任何事件?？蓡螕舻脑刂改切┑究僧a生默認操作的元素，或這那些已經被指定了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);
}
}
};
