<div id="box">
    <div id="box2">
        <p id="test">test</p>
    </div>
</div>
<script>
    document.getElementById(‘box‘).addEventListener(‘click‘,function () {
        console.log(‘box‘)
    },true)
    document.getElementById(‘box2‘).addEventListener(‘click‘,function () {
        console.log(‘box2‘)
    },false)
    document.getElementById(‘test‘).addEventListener(‘click‘,function () {
        console.log(‘test‘)
    },false)
</script>

結果:

box

test

box

addEventListener( name , function , boolean )

boolean (true) :該事件為捕獲事件，當事件觸發時候，在捕獲階段就執行

boolean (false) :該事件為冒泡事件，當事件觸發時候，在冒泡階段就執行

事件流程 ：

　　1. test 被點擊，即事件觸發

　　2. 捕獲 box ( box上面綁定了事件為捕獲事件，會執行box上面的事件)

3. 捕獲 box 2( box2上面綁定了事件為冒泡事件，這裏不會執行 ) 　

4. 捕獲 test( test上面綁定了事件為冒泡事件，這裏不會執行 )

5. 冒泡 test( test上面綁定了事件為冒泡事件，這裏會執行test上面的事件 )

6. 冒泡 box2( test上面綁定了事件為冒泡事件，這裏會執行test上面的事件)

7. 冒泡 box( test上面綁定了事件為捕獲事件，這裏不會執行)

　　8.執行完畢

在上面的事件傳播中有一個事件裏面執行了 event.stopPropagtion() 方法， 即後面的事件都不會執行了。

代碼僅供參考，具體功能可以自己擴展。

http://www.cnblogs.com/jiebba 我的博客，來看吧！

js事件捕獲和冒泡解析