資訊專欄INFORMATION COLUMN
摘要：事件流事件流描述的是從頁(yè)面中接收事件的順序。其次，必須事先指定所有事件處理程序而導(dǎo)致的訪問(wèn)次數(shù)，會(huì)延遲整個(gè)頁(yè)面的交互就緒時(shí)間。
1.事件流
事件流描述的是從頁(yè)面中接收事件的順序。
1.1 事件冒泡IE中的事件流叫做冒泡，即時(shí)間最開(kāi)始由最具體的元素接收，然后逐級(jí)向上傳播到較為不具體的節(jié)點(diǎn)，直到傳播到document對(duì)象。
例：
Event Exampple
click
如果單擊頁(yè)面中div元素，那么click時(shí)間會(huì)按照以下順序發(fā)生：
document
圖解事件冒泡過(guò)程：
事件捕獲的思想是不太具體的節(jié)點(diǎn)應(yīng)該更早接收到事件，而最具體的節(jié)點(diǎn)應(yīng)該最后接收到事件。
以上面html頁(yè)面為例，如果單擊頁(yè)面中div元素，那么click時(shí)間會(huì)按照以下順序發(fā)生：
document
"DOM2級(jí)事件流"規(guī)定的事件包括三個(gè)階段：事件捕獲階段，處于目標(biāo)階段，事件冒泡階段。
以上面html頁(yè)面為例，單擊div元素會(huì)按照以下順序觸發(fā)事件：
以下是一個(gè)跨瀏覽器的事件處理程序
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;
}
},
// 移除事件處理程序(通過(guò)addEventListener添加的匿名函數(shù)無(wú)法移除)
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;
},
//阻止默認(rèn)事件比如a鏈接跳轉(zhuǎn)
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什么是事件委托？
事件委托是利用事件冒泡原理，指定一個(gè)事件處理程序，就可以管理某一類型的所有事件。
3.2為什么要事件委托？添加在頁(yè)面上的事件處理程序的數(shù)量直接關(guān)系到頁(yè)面的整體運(yùn)行性能，首先，事件處理函數(shù)都是對(duì)象，其數(shù)量越多，占用內(nèi)存就越大，則性能就越差。其次，必須事先指定所有事件處理程序而導(dǎo)致的DOM訪問(wèn)次數(shù)，會(huì)延遲整個(gè)頁(yè)面的交互就緒時(shí)間。
3.3例解事件委托//html