什么是事件冒泡
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
事件冒泡的作用
事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。
表现事件冒泡的代码
<body>
<div id="divOne" onclick="alert('我是最外层');">
<div id="divTwo" onclick="alert('我是中间层');">
<a id="hr-three" href="http://www.baidu.com"mce_href="http://www.baidu.com" onclick="alert('我是最里层！')">
点击我
</a>
</div>
</div>
</body>
从这个代码就可以看出事件冒泡的过程，只点击了“点击我”，就会依次弹出“我是最里层—->我是中间层—->我是最外层—->然后再链接到百度. ”，本来只点击ID为hr_three的标签，但执行了三个alert的操作；过程：hr_three—->divTwo—->divOne。从最里层冒泡到最外层。
四种阻止冒泡的方法
- even.stopPropagation();
<script src="jquery-1.10.1.min.js"></script>
<script>
$(function(){
$("#hr_three").click(function(event){
event.stopPropagation();
});
});
</script>
even.stopPropagation():终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。 此时点击“点击我”，就阻止了事件冒泡，但不会阻止默认行为，会弹出“我是最里层”，然后链接到百度
- return false;
<script src="jquery-1.10.1.min.js"></script>
<script>
$(function(){
$("#hr_three").click(function(event){
return false;
});
});
</script>
点击“点击我”，会弹出“我是最里层”，但不会链接到百度 作用是：事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转）
- event.preventDefault();
<script src="jquery-1.10.1.min.js"></script>
<script>
$(function(){
$("#hr_three").click(function(event){
event.preventDefault();
});
});
</script>
点击“点击我”，会发现它依次弹出：我是最里层—->我是中间层—->我是最外层，但最后却没有跳转到百度 作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转） 注：一个事件起泡对应触发的是上层的同一事件 如果在click事件中，在你要处理的事件之前加上e.preventDefault();那么就取消了行为（通俗理解：相当于做了个return操作），不执行之后的语句了。
网友评论