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>

　　

结果:boxtestbox2addEventListener( 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 我的博客，来看吧！