web2.0中的事件传播机制
Posted 菜菜粥
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web2.0中的事件传播机制相关的知识，希望对你有一定的参考价值。
这里是核心理论 也就是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中的事件传播机制的主要内容，如果未能解决你的问题，请参考以下文章