web2.0中的事件传播机制
来源:互联网 发布:淘宝5金冠童装店铺排行 编辑:程序博客网 时间:2024/05/15 17:54
这里是核心理论 也就是js事件触发机制的原理 简单来说capture就是事件传播从window对象的开始读到触发的DOM对象上(即触发的对象), 而bubble则是从触发的DOM开始回到window对象 记住只要是事件触发 就会首先执行这两步即是v的过程, 把从父级往子级的同类事件(即第三个参数是ture),放入一个capture对列, 然后把从子级到父级的同类事件装入bubble队列(即第三个参数是false 注意事件默认是false),随后按照从capture出列到bubble出列,还可以说是capture是先行触发的 其实它是拿到就触发的 我这里形象的说明下 顺序关系
div1包含着div2,即是父子关系
<!DOCTYPE html><html><head> <title>环形按钮</title> <meta charset="utf-8"> <script type="text/javascript" src="test.js"></script></head><body> <div id='div1' style="width:200px; height:200px; background-color:red"> div1 <div id='div2' style="position:relative; top:300px; width:100px;height:100px; background-color:green" > div2 </div> </div></body></html>
当两者都是bubble
window.onload = function() { document.getElementById('div1').addEventListener('click', function() { console.log('div1');}, false); document.getElementById('div2').addEventListener('click', function() { console.log('div2');}, false);}
触发div1的click 控制台输出div1
触发div2的click 控制台输出div2 div1
当父元素为capture, 子元素为bubble
window.onload = function() { document.getElementById('div1').addEventListener('click', function() { console.log('div1');}, true); document.getElementById('div2').addEventListener('click', function() { console.log('div2');}, false);}
触发div1的click 控制台输出div1
触发div2的click 控制台输出div1 div2
当父元素为bubble, 子元素为capture
window.onload = function() { document.getElementById('div1').addEventListener('click', function() { console.log('div1');}, false); document.getElementById('div2').addEventListener('click', function() { console.log('div2');}, true);}
触发div1的click 控制台输出div1
触发div2的click 控制台输出div2 div1
当父元素为capture, 子元素为capture
window.onload = function() { document.getElementById('div1').addEventListener('click', function() { console.log('div1');}, true); document.getElementById('div2').addEventListener('click', function() { console.log('div2');}, true);}
触发div1的click 控制台输出div1
触发div2的click 控制台输出div1 div2
为什么要有capture和bubble
这样你不就可以对事件触发的顺序进行合理的控制了 同时你可以在capture阶段就阻止事件的传播,从而做到事件不被触发,具体优势,以后肯定会用到的,因为功能肯定是越多越好
- web2.0中的事件传播机制
- Android 事件传播机制
- android 事件传播机制
- web2.0中的用户点评机制
- JavaScript事件传播(冒泡机制)
- Android View事件传播机制
- 【朱学恒】Web2.0 时代的知识传播
- 【朱学恒】Web2.0 时代的知识传播
- 《引爆流行》:Web2.0的传播理论
- android控件的事件传播机制
- android控件的事件传播机制
- DOM模型事件传播机制应用
- Web2.0中的排行榜
- angularjs中的广播、事件传播总结
- web2.0中的1%定理
- 事件传播
- JavaScript中的事件传播(DOM2标准事件模型)
- JS中的事件传播和默认事件取消
- 排序算法&查找算法
- 【好程序员笔记分享】——编译预处理
- 素数求和
- 黑马程序员--Object-C常用关键字解析
- Linux命令输出重定向
- web2.0中的事件传播机制
- vs2010/MFC类型转换之CString转char *
- 手机与我
- 打印素数表(牢记)
- iOS sign 設定
- Python Wing IDE 在代码提示自动列表中,选择当前项
- java之内存泄露
- 贝塞尔曲线
- 剑指offer--序列化二叉树