JS事件流(W3C與IE區別)
一、JS事件的3個階段:捕獲、目標、冒泡,低版本IE不支援捕獲階段;
二、在瀏覽器解析事件的時候,有兩種觸發方式:一種叫做Bubbling(冒泡),另外一種叫做Capturing(捕獲)。
冒泡的方式效果就是當一個DOM元素的某事件例如click事件被fire時,依次它的父元素的click事件也被fire(觸發),一直傳遞到最頂層的body元素為止。而捕獲的觸發方式正好相反,當某個元素的click事件被觸發時,先從最頂層的body元素click事件被觸發開始,一直傳遞到真正被觸發的元素為止。
1、W3C事件流:
(1)從根文件(html)開始遍歷所有子節點,如果目標事件的父節點設定為捕獲時觸發,則執行該事件,直到目標被執行,然後再事件冒泡(設定為捕獲時觸發的事件不再被執行)。
(2)支援冒泡和捕獲方法,並且可以在一個DOM上繫結多個事件處理器,各自不會衝突,
(3)addEvntListener(removeEventListener)有三個引數:第一個–>事件型別;第二個–>處理函式,直接給函式名或函式體;第三個–>布林值,表示是否支援捕獲事件;
(4)通過addEventListener和removeEventListener來實現函式的新增和刪除。
2、ie事件流:
(1)從目標事件被執行,然後再冒泡父節點的事件,直到根文件;
(2)只支援冒泡,並且可以在一個dom上繫結多個事件處理函式;
(3)attachEvent(detachEvent)引數與W3C標準相同,注意:事件型別前+on;沒有布林引數;
(4)通過attachevent和detachevent來實現函式的新增和刪除。
3、阻止某瀏覽器DOM元素的預設行為:
(1)W3C通過呼叫e.preventDefault();
(2)IE則通過window.event.returnValue=false;
4、阻止冒泡事件:
(1)W3C呼叫e.stopPropagation();或者 return false;
(2)IE通過設定window.event.cancleBubble=true;
5、 javascript 相容W3c和IE的新增(取消)事件監聽方法:
//新增事件監聽相容函式
function addHandler(target, eventType, handler){
if(target.addEventListener){//主流瀏覽器
addHandler = function(target, eventType, handler){
target.addEventListener(eventType, handler, false);
};
}else {//IE
addHandler = function(target, eventType, handler){
target.attachEvent("on"+eventType, handler);
};
}
//執行新的函式
addHandler(target, eventType, handler);
}
//刪除事件監聽相容函式
function removeHandler(target, eventType, handler){
if(target.removeEventListener){//主流瀏覽器
removeHandler = function(target, eventType, handler){
target.removeEventListener(eventType, handler, false);
}
}else{//IE
removeHandler = function(target, eventType, handler){
target.detachEvent("on"+eventType, handler);
}
}
//執行新的函式
removeHandler(target, eventType, handler);
}
三、手寫事件模型及事件代理、委託
1、事件代理/委託的優缺點,是靠冒泡機制來實現的:
優點:
(1)可以減少大量記憶體佔用,減少事件註冊;
(2)可以實現當新增子物件時,無需再對其繫結事件,對於動態內容部分更合適;
缺點:如果所有事件都用事件代理,則可能會出現事件誤判,即本不應該觸發的物件綁上了事件。