js事件捕獲和冒泡解析

<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

box2

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 

   我的部落格，來看吧！