js事件捕获和冒泡解析

Posted 2020-09-28 小结巴巴吧

<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    我的博客，来看吧！