JS的事件監聽機制

很久以前有個叫Netscape的姑娘，她制訂了Javascript的一套事件驅動機制（即事件捕獲）

後來又有一個叫“IE”的小子，這孩子比較傲氣，他認為“憑什麼我要依照你的規則走”，於是他又創造了一套自己的規則（事件冒泡）

再後來，有個叫W3C的媒婆，想撮合這兩個孩子，將他們的特點融合在了一起，這下，事件產生的順序變成：

事件從根節點開始，逐級派送到子節點，若節點繫結了事件動作，則執行動作，然後繼續走，這個階段稱為“捕獲階段(Capture)”；
執行完捕獲階段後，事件由子節點往根節點派送，若節點繫結了事件動作，則執行動作，然後繼續走，這個階段稱為“冒泡階段(Bubble)”。

 

 

善良的Netscape以及其姐妹們都接受了媒婆的建議，採用了新的事件規則，而驕傲固執的IE小子始終按照自己的規則執行。最終使得這成為困擾前端開發人員的相容性問題之一。那麼，怎麼繫結事件呢？

由於這兩派瀏覽器的差異，其繫結的方法也不一樣，其中，遵循標準的瀏覽器使用W3C定義的addEventListener函式繫結，函式定義如下：

function addEventListener(string eventFlag, function eventFunc, [bool useCapture=false])
eventFlag : 事件名稱，如click、mouseover…
eventFunc: 繫結到事件中執行的動作
useCapture: 指定是否繫結在捕獲階段，true為是，false為否，預設為true
在事件監聽流中可以使用event.stopPropagation()來阻止事件繼續往下流

 

IE中使用自有的attachEvent函式繫結時間，函式定義如下：
function attachEvent(string eventFlag, function eventFunc)
eventFlag: 事件名稱，但要加上on，如onclick、onmouseover…
eventFunc: 繫結到事件中執行的動作
在事件監聽流中可以使用window.event.cacenlBubble=false來阻止事件繼續往下流

總結：addEventListener(string eventFlag, function eventFunc, [bool useCapture=false])，針對ff，chrome，safari瀏覽器，false指冒泡階段，預設為true，指捕獲階段。不過一般我們都用false。

 attachEvent(string eventFlag, function eventFunc)，針對ie系列、還有opera瀏覽器，少了事件處理機制的引數，只指定事件型別（別忘了on）和觸發哪個函式。

 

有了這些認知之後，有了大致的思路，對應的程式碼：

if(document.addEventListener){

document.addEventListener('click', hideBox, false);

在document繫結資訊框（豎的那個）隱藏函式（即隨便點html頁面的哪裡關閉展開的資訊框，這也是使用document.addEventListener的原因，要幫在文件上）

document.getElementById('status_hide').addEventListener('click', showBox, false);

在status_hide節點繫結資訊框展開(詳細的那個)函式並停止事件流（即點選豎的這個，展開詳細的那個）

document.getElementById('status_show').addEventListener('click', stopEvent, false);

因為false確定的是事件冒泡，為了防止點詳情的時候，向上冒泡到document，觸發document設定的click時hidebox方法，在status_show我們要繫結阻止事件流函式。

}

這個明白了，針對ie再寫個attachEvent的就可以了，當然ie的引數只用2個就可以了，它的時間處理機制就是冒泡不用額外設定。

 

最後要說說這段函式。

var stopEvent = function(event){ e = event || window.event; if(e.stopPropagation){ e.stopPropagation(); }else { e.cancelBubble = true; } };

可以確定它的作用是防止前面提到的冒泡，引發不該引發的click事件。

可是它呢function(event){e = event || window.event}