事件冒泡和捕获

1.理解事件冒泡和事件捕获

在JS中，我们管事件发生的顺序叫“事件流”，当触发某个事件时，会发生一系列的连锁反应

  
  

    
    

     
     

    
    
    
    

     
     

      
      <div class="grandpa">
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      	我是爷爷div
     
     
    
    

    
    

     
     

    
    
    
    

     
     
	
      
      <p class="son">
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      	我是儿子p
     
     
    
    

    
    

     
     

    
    
    
    

     
     
	  
      
      <a class="grandson" href="#">我是孙子a
      
      </a>
     
     
    
    

    
    

     
     

    
    
    
    

     
     
  
      
      </p>
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      </div>
     
     
    
    
  
  

如果给每个标签都绑定一个事件，当点击<a>标签时，会发现绑定在<div>和<p>标签上的事件也会被触发，这是为什么呢？为了解答这个问题，微软和网景公司提出了两种不同的概念：事件捕获 与 事件冒泡

（1）事件捕获：由微软公司提出来的，事件从文档根节点（Document 对象）流向目标节点，途中会经过目标节点的各个父级节点，并在这些节点上触发捕获事件，直至到达事件的目标节点

（2）事件冒泡：由网景公司提出，与事件捕获相反，事件会从目标节点流向文档根节点，途中会经过目标节点的各个父级节点，并在这些节点上触发捕获事件，直至到达文档的根节点。整个过程就像水中的气泡一样，从水底向上运动

Tips：上面提到的目标节点指的是触发事件的节点

后来，W3C 为了统一标准，采用了一个折中的方式，即将事件捕获与事件冒泡合并，也就是现在的“先捕获后冒泡”，如下图所示：

2.事件捕获（event capturing）

在事件捕获阶段，事件会从 DOM 树的最外层开始，依次经过目标节点的各个父节点，并触发父节点上的事件，直至到达事件的目标节点。以上图中的代码为例，如果单击其中的<a>标签，

则该事件将通过document -> div -> p -> a的顺序传递到<a>标签。

 拓展：

element.addEventListener(event, function, useCapture)

addEventListener方法用来为一个特定的元素绑定一个事件处理函数，有三个参数，分别是"没有on的事件类型"、"事件处理函数"、"控制事件阶段"，第三个参数是boolean类型，默认是false，表示在事件冒泡的阶段调用事件处理函数，像上面代码中传入true，就表示在事件捕获的阶段调用事件处理函数。

3.事件冒泡（event bubbling）

事件冒泡正好与事件捕获相反，事件冒泡是从目标节点开始，沿父节点依次向上，并触发父节点上的事件，直至文档根节点，就像水底的气泡一样，会一直向上。

  4.阻止事件捕获和冒泡

了解了事件捕获和事件冒泡后会发现，这个特性并不友好，例如我们在某个节点上绑定了事件，本想在点击时触发这个事件，结果由于事件冒泡，这个节点的事件被它的子元素给触发了。我们要如何阻止这样的事情发生呢？

JS中提供了stopPropagation() 方法来阻止事件捕获和事件冒泡的发生，语法格式如下：

event.stopPropagation();
  
  

注意：stopPropagation()会阻止事件捕获和事件冒泡，但是无法阻止标签的默认行为，例如点击链接任然可以打开对应网页。

 此外，可以使用stopImmediatePropagation()方法来阻止同一节点的同一事件的其它事件处理程序，例如：为某个节点定义了多个点击事件，当事件触发时，这些事件会按定义顺序依次执行，如果其中一个事件处理程序中使用了 stopImmediatePropagation() 方法，那么剩下的事件处理程序将不再执行。

语法格式如下：

event.stopImmediatePropagation();
  
  

示例：

 

5.阻止默认操作

某些事件具有与之关联的默认操作，例如：当单击某个链接时，会自动跳转到指定的页面，当单击提交按钮时，会将数据提交到服务器等。如果不想这样的默认操作发生，可以使用 preventDefault() 方法来阻止，其语法格式如下：

event.preventDefault();
  
  

示例：

注意：IE9 及以下的版本不支持 preventDefault() 方法，对于 IE9 及以下的浏览器可以使用 event.returnValue = false;