探讨Js的事件的冒泡阶段

近来看到了一个新的知识点叫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;来阻止事件冒泡时，也是会自动的阻止元素的默认事件的。大家有兴趣的可以自己去写写。

转载文章，请注明出处，http://www.cnblogs.com/olivers/p/5254646.html