事件從根節點開始，逐級派送到子節點，若節點綁定了事件動作，則執行動作，然后繼續走，這個階段稱為“捕獲階段(Capture)”；
執行完捕獲階段后，事件由子節點往根節點派送，若節點綁定了事件動作，則執行動作，然后繼續走，這個階段稱為“冒泡階段(Bubble)”
由於這兩派瀏覽器的差異，其綁定的方法也不一樣，其中
1、遵循標准的瀏覽器使用W3C定義的addEventListener函數綁定，函數定義如下：
function addEventListener(string eventFlag, function eventFunc, [bool useCapture=false])
eventFlag : 事件名稱，如click、mouseover…
eventFunc: 綁定到事件中執行的動作
useCapture: 指定是否綁定在捕獲階段，true為是，false為否，默認為true
在事件監聽流中可以使用event.stopPropagation()來阻止事件繼續往下流
2、IE中使用自有的attachEvent函數綁定時間，函數定義如下：
function attachEvent(string eventFlag, function eventFunc)
eventFlag: 事件名稱，但要加上on，如onclick、onmouseover…
eventFunc: 綁定到事件中執行的動作
在事件監聽流中可以使用window.event.cacenlBubble=true來阻止事件繼續往下流
總結：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個就可以了，它的時間處理機制就是冒泡不用額外設置。
現在用的源生的較少了，jquery比較多了，但是jquery是默認允許冒泡的，但是也沒有參數來阻止冒泡的，所有我們需要自己手動進行冒泡阻止：
方法1：
$('.show').bind('click',function(e){
if(e.stopPropagation){
e.stopPropagation();
}
else{
e.cancelBubble = true;
}
});
方法2：
$('.show').bind('click',function(){
//處理邏輯
return false;
});
//注意：這種方法會阻止后面的所有瀏覽器的默認動作，如a標簽會阻止跳轉動作。
最后是一個阻止冒泡的函數，視情況使用：
var stopEvent = function(event){
e = event || window.event;
if(e.stopPropagation){
e.stopPropagation();
}
else {
e.cancelBubble = true;
}
};