首页 > 代码库 > 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事件捕获和冒泡解析
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。