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

js事件捕获和冒泡解析

2024-10-30 20:46:39   212人阅读





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






























        

            
                
                  
                
                

                    联系

                    我们