冒泡和捕获

​在浏览器中，事件的传播方式分为：事件冒泡和事件捕获。那么事件冒泡和事件捕获分别是什么？为什么会出现两种传播方式呢？

一、前提

1. 在浏览器中用户点击鼠标，操作系统最先知道，浏览器次之。
2. 页面中子元素被点击了，意味着父元素也被点击。
3. 如果子元素和父元素同时监听了点击事件，那么点击子元素后，是子元素先知道，还是父元素先知道。而这个知道的前后顺序，就是由事件传播方式决定的。

二、冒泡模式和捕获模式

​事件的传播途径是通过文档节点组成的有序列表。在DOM里面，这个事件传播路径的最后一点就是事件对象（Event Target）本身，其之前的元素就是事件对象的祖先元素。

• 触发事件后：
  • 对于冒泡模式，事件首先被事件对象本身知道，然后让其父元素知道，就这样在祖先元素中一层层向外传播，直至window 对象，如果中间有节点设置监听这个事件，就调用其监听函数。
  • 对于捕获模式，事件首先被window 对象知道，然后到document 节点，最后才被事件对象本身知道，如果中间有节点监听此事件，就调用监听函数。
    例子:

        
            
            
            
        
        
            

                
item1
                
item2
                
item3
            
        
    

• 在上面例子的结构中，假设我在item3 用鼠标点击了一下。
  • 在捕获模式中，事件是按以下顺序传播的：window --> document --> --> -->
    -->
    • ,如果有节点监听点击事件，那么就在传播到那个节点的时候调用事件函数。
    • 在冒泡模式中，事件的传播顺序是同捕获模式相反的：
    • -->
      --> --> --> document --> window,如果有节点监听点击事件，那么就在传播到那个节点的时候调用事件函数。

    三、设置冒泡模式或捕获模式

    ​在十几年前，那时候浏览器各自为政，其中一个巨头网景公司主张捕获模式，所以那时它的浏览器只支持捕获模式；而另一巨头微软公司支持冒泡模式，所以IE 9 以前的版本只支持冒泡模式。在2000 年的时候，w3c 将两种模式都写入标准里面，所以现在大部分浏览器都支持两种模式。

    ​我们可以使用addEventListener(type, listener, useCapture) 方法来设置事件的传播模式，如果想要捕获模式，就将第三个参数useCapture 设为true 。如果想要冒泡模式，可以将第三个参数设为false 或者直接省略第三个参数，因为不传入参数的时候，参数值为undefined 。

    ​ 例子：

    
    
    
        
        
    
    
        
    1
            
    2
                
    3
                    
    4
                        
    5
                    
                
            
        
        
    
        
    
    
    

    下图是我点击div 5 的结果

    

    ​

    ​在两种模式混用的情况下，如果是事件对象（Event Target）的父元素，按先捕获后冒泡的顺序进行。如果是事件对像自身，那么谁先监听就先执行谁。在实际工作中不推荐混用两种模式。

    ​例子：对上面代码进行小小的改动

    
    
    
        
        
    
    
        
    1
            
    2
                
    3
                    
    4
                        
    5
                    
                
            
        
        
    
        
    
    
    

    下图是我点击div 5 的结果

    

    链接

    本文部分借鉴自: https://stackoverflow.com/a/4616720/7309659
    部分来自饥人谷老师方方的观点: http://www.jianshu.com/users/b4fd9acca45c/timeline
    饥人谷链接：https://jirengu.com/