資訊專欄INFORMATION COLUMN
摘要：事件流事件流描述的是從頁面中接收事件的順序。其次，必須事先指定所有事件處理程序而導致的訪問次數，會延遲整個頁面的交互就緒時間。
1.事件流
事件流描述的是從頁面中接收事件的順序。
1.1 事件冒泡IE中的事件流叫做冒泡，即時間最開始由最具體的元素接收，然后逐級向上傳播到較為不具體的節點，直到傳播到document對象。
例：
Event Exampple
click
如果單擊頁面中div元素，那么click時間會按照以下順序發生：
document
圖解事件冒泡過程：
事件捕獲的思想是不太具體的節點應該更早接收到事件，而最具體的節點應該最后接收到事件。
以上面html頁面為例，如果單擊頁面中div元素，那么click時間會按照以下順序發生：
document
"DOM2級事件流"規定的事件包括三個階段：事件捕獲階段，處于目標階段，事件冒泡階段。
以上面html頁面為例，單擊div元素會按照以下順序觸發事件：
以下是一個跨瀏覽器的事件處理程序
var eventUtil = {
// 添加事件處理程序
addHandler: function(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false); //DOM
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler); //IE
} else {
element["on" + type] = handler;
}
},
// 移除事件處理程序(通過addEventListener添加的匿名函數無法移除)
removeHandler: function(element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false); //DOM
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler); //IE
} else {
element["on" + type] = null;
}
},
//獲取事件
getEvent: function(event) {
return event ? event : window.event;
},
//獲取事件類型
getType: function(event) {
return event.type;
},
//獲取事件源
getElement: function(event) {
return event.target || event.srcElement;
},
//阻止默認事件比如a鏈接跳轉
preventDefault: function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
//阻止事件冒泡
stopPropagation: function(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
}
3.事件委托
3.1什么是事件委托？
事件委托是利用事件冒泡原理，指定一個事件處理程序，就可以管理某一類型的所有事件。
3.2為什么要事件委托？添加在頁面上的事件處理程序的數量直接關系到頁面的整體運行性能，首先，事件處理函數都是對象，其數量越多，占用內存就越大，則性能就越差。其次，必須事先指定所有事件處理程序而導致的DOM訪問次數，會延遲整個頁面的交互就緒時間。
3.3例解事件委托//html