您现在的位置是:首页 > web开发 > js事件捕获和冒泡解析

js事件捕获和冒泡解析

web开发作者:dayu日期:5天前点击:0


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

原文地址:http://www.cnblogs.com/jiebba/p/7206114.html


下一篇       上一篇