※ 引述《ericdoctor (小黑)》之銘言：
: 各位好
: 小的是前端新手
: 近來讀到javascript event在瀏覽器的發生的兩個階段
: 也就是 event bubbling/capturing
: 想請問各位~
: 關於這兩種事件處理有什麼應用嗎??
: 因為好像IE8以前都不支援~
: 所以老舊的網頁都沒有相關的code
: Google也找不到我想要的結果
: 請各位指教
: 謝謝
事件的觸發順序可以參考這張圖︰
http://www.w3.org/TR/DOM-Level-3-Events/eventflow.svg
以 form 為例子︰
1. 你想做一個按鈕，按下後會跳出懸浮選單
2. 選單上有按鈕可以做某些事
3. 按任意空白處隱藏懸浮選單
4. 等待連線時，把整個 form 禁用
可以分別註冊四個不同的事件
1. button.click + stopPropagation，顯示懸浮選單
2. button.click + stopPropagation，執行選單上的項目
3. document.click，隱藏懸浮選單
4. form.click + capture + stopPropagation
button.click + stopPropagation 可以讓事件不要往上 bubble，
否則 document.click 收到 bubbled event 就會把懸浮選單給隱
藏。
form.click + capture + stopPropagation 可以讓事件連 target
phase 都到不了，保證 form 內的 click event 不會被觸發。
但是以我的角度來說的話，我會建議無論如何都不要用 capture，
除非你確定你要的特殊功能必須使用 capture（e.g. 側錄鍵盤︰
window.keydown + capture；url rewrite︰window.click +
capture），否則應該都有更好的做法。