當我們給元素繫結好單擊事件，單擊這個元素，就會執行相應的**，但是如果這個元素的父元素、祖先元素都繫結了單擊事件，他們會執行嗎？他們的執行順序是什麼呢？
可以嘗試把頁面理解為乙個二維的平面，想象有一張白紙，我們在這張紙上畫下了一層一層的同心圓，當我們用手指按住最內的圓圈時，也按住了紙上所有的同心圓，也按住了整張紙。所以單擊事件不僅僅發生在被擊中的元素上，換句話說，當我們用滑鼠單擊其中乙個元素時，你也是在單擊元素的容器，甚至一層一層向外傳遞（也可以是向內），甚至是在單擊整個頁面。
定義：描述的是從頁面中接收事件的順序
ie的事件流叫做事件冒泡，即事件開始時有最具體的元素（文件中巢狀層次最深的那個節點）接收，然後逐級向上傳播到較為不具體的節點，直到document物件。
下圖展示了事件冒泡的過程
netscape communicator團隊提出的另一種事件流叫做事件捕獲。事件捕獲的思想是不太具體的節點應該更早接收到事件，而最具體的節點應該最後接收到事件。「dom2級事件」規定的事件流包括三個階段：事件捕獲、處於目標階段和事件冒泡階段。發生的順序是事件捕獲階段==>目標階段==>事件冒泡階段
了解了基本概念，來用**測試一下。
html
#first
#second
#third
//第三個引數設為false，將事件處理程式新增到冒泡階段
first.addeventlistener('click',function(e),false);
second.addeventlistener('click',function(e),false);
third.addeventlistener('click',function(e),false);
因為最內層元素本身有乙個單擊事件，它的父元素及祖先元素分別有乙個單擊事件，所以單擊最內層元素位置，同時單擊了三個元素，啟動了三次事件處理程式。因為三個事件都是冒泡階段執行，所以控制台輸出的順序為最內層的藍色框——>中間的黃色框——>外層的紅色框。
將第三個引數都改為true，控制台輸出如下：
這時事件執行順序改為從最外層的元素——>中間元素———>最內層的元素
我們可以很直觀的看到事件同時都在冒泡階段或捕獲階段執行的順序，但如果這三個元素的事件處理程式在不在同一階段執行呢？在看到結果之前可以試試預想一下它們的執行順序。
我們可以試一試將紅色框與藍色框的第三個引數設為false，黃色框的引數設為true。輸出結果如下：
這和之前你預想的相同嗎？我們可以這麼來理解它們的執行：
其他：更改了元素繫結事件**的順序，執行順序也和上面表現的一致。
JS基礎 事件 事件流
總所周知，js和html之間的互動是通過事件實現的，互動過程中會產生許多事件，而從頁面上接收事件的順序就是事件流。事件流分為ie的事件冒泡流和netscape的事件捕獲流 這是指ie的事件流，即事件開始時由最具體的元素接收，然後逐級向上傳播到文件節點。所有的瀏覽器都在支援事件冒泡。但是ie5.5及之...
dom 0 2級事件 事件流
dom 0 2 級事件 事件流是兩個不同的概念。為了分辨它們 提醒自己 我寫了此篇小記。如有錯誤，歡迎批評指正！dom 0 級事件 通過事件繫結的方式，給 dom 元素註冊事件處理函式。它的特點是只能繫結乙個事件 後面會覆蓋前面 dom 2 級事件 相比於 dom 0 級更加靈活 可以繫結多個 可以...
js 事件 事件物件
關於事件寫了一系列文章 1.事件流 事件捕獲和事件冒泡 2.事件處理程式 3.事件物件 本文介紹事件物件 4.通用的事件偵聽器函式 5.事件迴圈 event loop 6.事件 event delegation 1.事件物件 觸發dom上的某個物件時，會產生乙個事件物件event dom0級事件物件...