js事件捕獲和冒泡解析

標籤：階段   box   擴充   span   false   ons   class   blog   ntb   

<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事件捕獲和冒泡解析