當瀏覽器發展到第4代時，瀏覽器開發團隊遇到了一個問題：頁面中的哪個元素會擁有某個特定的事件？當你單擊某個按鈕時，顯然該單擊事件並不僅僅發生在按鈕上，它還發生在按鈕的所有祖先元素上，比如按鈕的容器元素，容器元素的父元素，甚至整個頁面document。但是，哪個元素最先接收到該事件呢？頁面接收事件的順序又是怎樣的呢？由此引出了事件流的概念。事件流描述的就是從頁面中接收事件的順序。

2、兩個模型
Netscape和Microsoft給出了兩個不同的結論。Netscape說document會首先接收到該事件，提出了事件捕獲流。而Microsoft認為事件首先在按鈕上發生，提出了事件冒泡流。

3、事件冒泡

事件冒泡的作用：（1）事件冒泡允許多個操作被集中處理（把事件處理器新增到一個父級元素上，避免把事件處理器新增到多個子級元素上），還可以讓你在物件層的不同級別捕獲事件

（2）讓不同的物件同事捕獲同一事件，並呼叫自己的專屬處理程式做自己的事情

阻止事件冒泡（程式為轉）

<div onclick="showMsg(this,event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="showMsg(this,event)" id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//阻止事件冒泡後，你點選灰色盒子，整個過程只彈一次對話方塊了（注意與預設情況對比）
function showMsg(obj,e)
{
    alert(obj.id);
    stopBubble(e)
}
//阻止事件冒泡函式
function stopBubble(e)
{
    if (e && e.stopPropagation)
        e.stopPropagation()
    else
        window.event.cancelBubble=true
}
</script>
 

4.事件捕獲：與冒泡正好相反，事件觸發順序是從最外層的物件（document物件）到最裡面的物件

5、DOM事件流：DOM同時支援事件捕獲和事件冒泡，但是事件捕獲先發生，兩個事件流可以遍歷DOM中的所有物件，起始和結束都是document物件。

<div class="div1" id="di1">
    <div class="div1" id="di2"></div>
</div>
<script type="text/javascript">
    function $(ID){
        return document.getElementById(ID);
    }
    var Div1 = $("di1");
    var Div2 = $("di2");
//    當第三個值為true的時候是“捕獲事件”  如果是false則為“冒泡”
    Div1.addEventListener("click",fun1);
    Div2.addEventListener("click",fun2);
    function fun1(){
        alert("我是父級div，di1");
        return true;//true為事件捕獲
    }
    function fun2(){
       alert("我是子級div，di2");
       return true;//true為事件捕獲
    }
</script>