近来看到了一个新的知识点叫Js的事件冒泡，因此决定自己来研究一番。
大家应该都知道，Js中的事件处理分为三个阶段，1：事件的捕获阶段，2：处于目标阶段，3：事件的冒泡阶段。那么什么是事件的捕获和冒泡呢？
从概念上来说，事件的捕获就是从最外层也就是从html标签开始向内一层层的寻找目标元素，直到捕获到目标为止。而事件的冒泡就是从目标开始，向上一层层的冒泡，直到最上一级为止。
单从概论上来说，可能不是那么的清楚，所以我们直接上代码。
<div id="div1">
<div id="div2">
<input type="button" id="btn" value="点我"/>
<a href="http://www.baidu.com" target="_black">百度</a>
</div>
</div>
首先在html中创建了如上的几个元素。
然后我们给id为"btn"的这个元素绑定一个click事件。
var btn = document.getElementById('btn');
btn.addEventListener('click',function(e){
alert(3);
4 });
然后，运行html，点击按钮，发现的结果是依次alert出了3、2、1。也就是说在触发子元素的click事件时，同时也触发了这个子元素上级的父元素的click事件，那么怎么才能在点击子元素时，不触发其父元素的事件呢？方法其实很简单。将以上的代码作如下的修改：
var btn = document.getElementById('btn');
btn.addEventListener('click',function(e){
alert(3);
e.stopPropagation();
});
然后，再运行，点击按钮，这次的结果就只alert出了1。
也就是说可以用e.stopPropagation()方法来阻止事件的冒泡。也有的人说，直接用return false;就可以了，但是我在测试的时候，发现，对于用js的addEventListener()方法绑定的事件，使用return false;是无法阻止事件冒泡的。然后使用jquery绑定的事件则是可以的。不过这两种方法还是有区别的。比如说我给html中的a链接也加上一个事件。
var link = document.getElementsByTagName('a')[0];
link.addEventListener('click',function(e){
alert(3);
});
然后，点击链接，结果是先alert出了3、2、1，然后就跳转到了百度。
我们再加一行代码。
var link = document.getElementsByTagName('a')[0];
link.addEventListener('click',function(e){
alert(3);
e.preventDefault();
});
发现，结果就只alert出了3、2、1，并没有像刚才一样跳转到百度。e.preventDefault()这个方法的作用就是阻止元素的默认事件，因为href的链接就没有被触发了。
还有一点需要注意的就是在jquery中使用return false;来阻止事件冒泡时，也是会自动的阻止元素的默认事件的。大家有兴趣的可以自己去写写。