JavaScript捕捉事件和阻止冒泡事件实例分析
本文实例讲述了JavaScript捕捉事件和阻止冒泡事件。分享给大家供大家参考，具体如下：
今日，项目程序出现异常，后发现跟冒泡事件有关，利用此机会探索一下利用Javascript捕获和冒泡事件。
一、要探究捕获和冒泡事件，首先要知道什么是事件的捕获和冒泡，所以呢，先从概念入手；
事件的冒泡：在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
其实事件冒泡是一个从后代节点向祖先节点冒泡的过程，而捕获是从祖先节点到后节点的过程。
我为了方便理解，则用先捕获，后冒泡，捕获从上到下，冒泡从下到上来记忆。我记得从哪儿看到的，有人把捕获比喻为石头沉入海底，而把冒泡比喻为气泡冒出水面。当然了，捕获的深度取决于你的DOM布局，海底就有点深了哈，^_^
注意：IE6、IE7、IE8只支持冒泡流，不支持捕获流。
二、为什么要阻止冒泡事件
也许会有人问：为什么要阻止冒泡事件呢？阻止冒泡事件有什么用处呢？
下面我们就来说下为什么要阻止冒泡事件：
先举个例子吧，如下代码：
<html>
<div id='div_1' onclick="alert('I'm First!')">
<div id='div_2' onclick="alert('I'm Second!')">
<a id="alink" onclick="alert('I'm Third!')" href="http://www.baidu.com" rel="external nofollow" >Click Here</a>
</div>
</div>
</html>
从上面的代码可以看出，div_1是div_2的容器，而div_2是a的容器，总共三层。
我们运行这个实例，点击Click Here会发现，分别弹出了三个alert提示框，而且顺序为I'm Third! 、I'm Second!、I'm First!，这就符合我们上面提到的冒泡的概念了。
而我这次碰到的问题就是这样，我称之为“事件重叠”。
出现这种情况，肯定不行，所以我们要阻止该事件冒泡的发生，那如何来阻止呢？下面将。
三、阻止事件冒泡的方法
首先我先给出一个纯JavaScript版的写法：
function aOnClick(e){
window.event? window.event.cancelBubble = true : e.stopPropagation();
}
解释：因为IE里的阻止冒泡的写法为window.event.cancelBubble = true，其他浏览器为e.stopPropagation();所以这里做了兼容。
再给出一个jQuery版本的写法：
$(function() {
$("#alink").click(function(event) {
event.stopPropagation();
});
});
四、阻止冒泡的其他方法及不同
我就是用上面的函数阻止了冒泡，但是还有其他的方法可以达到类似的效果，但还是有所不同；
$("#alink").click(function(event) {
return false;
});
解释：上面方法使用jQuery对alink进行了操作，经过测试，得出结论，该函数阻止了冒泡，但是它将a的默认行为也屏蔽掉了(此处为href属性)。这就是不同之处。
顺便说下，javasccript的阻止默认行为的方法
event.preventDefault();
从上面可以看出，return false;是event.stopPropagation();和PreventDefault()的并集。
就到这里吧！
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript事件相关操作与技巧大全》、《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
下面小编就为大家带来一篇js处理包含中文的字符串实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
工作小知识积累，获取图片的大小，需要的朋友可以参考下。2011-09-09
这篇文章主要向大家推荐一个原生js实现淘宝购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
这篇文章主要介绍了js与jquery回车提交的方法,实例分析了js与jQuery中监测及相应回车键实现提交的技巧,需要的朋友可以参考下2015-02-02
在本篇文章里小编给各位整理的是关于原生js实现文件上传、下载、封装等实例方法，需要的朋友们可以参考学习下。2020-01-01
这篇文章主要为大家详细介绍了JS实现躲避粒子小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
这篇文章主要介绍了bootstrap模态框跳转到当前模板页面，框消失了，而背景依然存在问题的解决方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
本文为大家介绍下使用js实现的map方法，具体示例如下，喜欢的朋友可以了解下2014-01-01
这篇文章主要为大家详细介绍了javascript实现文字无缝滚动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要介绍了如何用CocosCreator实现射击小游戏，此游戏难度不大，仅作为入门的练手小游戏，一小时就能完成，里面用到的知识很常用，喜欢游戏的同学，可以参考下2021-04-04
最新评论