1. 程式人生 > >JS事件流(W3C與IE區別)

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)可以實現當新增子物件時,無需再對其繫結事件,對於動態內容部分更合適;
缺點:如果所有事件都用事件代理,則可能會出現事件誤判,即本不應該觸發的物件綁上了事件。