对“捕获”和“冒泡”这两个概念，我想我们对冒泡更熟悉一些，因为在我们使用的所有浏览器中，都支持事件冒泡，即事件由子元素向祖先元素传播的，就 像气泡从水底向水面上浮一样。而在像firefox,chrome,safari这类所谓的标准浏览器中，事件传播还有个阶段，那就是捕获阶段，这个很少 有用武之地，所以被人疏忽遗忘也在所难免了，不常用不代表它不存在，本着科学严谨的态度，我们有必要去看一下它的庐山真面目。

事实上，捕获阶段是一个和冒泡阶段完全相反的过程，即事件由祖先元素向子元素传播，和一个石子儿从水面向水底下沉一样，要说明的是在 IE，opera浏览器中，是不存在这个阶段的。从各浏览器提供的注册事件监听的方法中可见一斑，例如适用于ie,opera的attachEvent， 有两个参数，attachEvent(”on”+type,fn)，而适用于所谓标准浏览器的addEventListener则有三个参 数，addEventListener(type,fn,boolean)，前面两个参数不用解释，第三个参数boolean，就是决定注册事件发生在捕 获阶段还是冒泡阶段，具体参考如下：

true : 捕获阶段

false : 冒泡阶段

事件分类

捕获型事件（非IE）、冒泡型事件（所有浏览器都支持）

捕获型事件是自上而下的，而冒泡型事件是自下而上的。下面我用一个图来直观表示：

 

冒泡型事件我们在工作中可能会比较多遇到，但捕获型事件怎样才会执行到呢，如果我们想要在非 IE 浏览器中要创建捕获型事件，只需将 addEventListener 的第三个参数设为true就好了。

DOME:

     
     
     
悟透事件的捕获和冒泡
     
    
      
        
       
元素a
        
       
            
        
元素b
            
        
                
         
元素c
            
        
        
       
    
      
    
      
        
       
元素d
    
      
     
    

 

取消事件冒泡：

在默认情况下，发生在一个子元素上的单击事件（或者其他事件），如果在其父级元素绑定了一个同样的事件，此时点击子元素，click事件会首先被子元素捕获，执行绑定的事件程序，之后会被父级元素捕获，再次激发一段脚本的执行，这就是所谓的“事件冒泡”。

在通常情况下，我们只希望事件发生在它的目标而并非它的父级元素上，只需加个stopBubble方法，即可取消事件冒泡，详见以下代码：

现在你可能想知道，什么时候需要阻止事件冒泡？事实上，现在绝大多数情况下都可以不必在意它。但是当你开始开发动态应用程序（尤其是需要处理键盘和鼠标）的时候，就有这个必要了。