首页 > 代码库 > js事件捕获和冒泡解析

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

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