很久以前有個叫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}