事件流：當你在頁面觸發一個點選事件後，頁面上不僅僅有一個元素響應該事件而是多個元素響應同一個事件，因為元素是在容器中的。事件發生的順序就是事件流，不同的瀏覽器對事件流的處理不同。

冒泡事件流：

當觸發一個節點的事件時，會從當前節點開始，依次觸發其祖先節點的同類型事件，直到DOM根節點 。

捕獲事件流：

當觸發一個節點的事件時，會從DOM根節點開始，依次觸發其祖先節點的同類型事件，

知道當前節點自身 。

DOM事件流：

dom同時支援兩種事件模型，但捕獲性事件先開始，從document開始也結束於document，dom模型的獨特之處在於文字也可以觸發事件。

什麼時候是事件冒泡？事件捕獲？

當使用addEventListener繫結事件，第三個引數設為true時表示事件捕獲，除此之外的所有事件均為事件冒泡。

廣州品牌設計公司https://www.houdianzi.com PPT模板下載大全https://redbox.wode007.com

阻止事件冒泡
①IE10之前，使用e.cancelBubble = true;

②IE10之後，使用 e.stopPropagation();

function myParagraphEventHandler(e) {
     e = e || window.event;     
     if (e.stopPropagation) {
           e.stopPropagation(); //IE10之後 
     } else {         
          e.cancelBubble = true; //IE10之前     
    } 
}
 

阻止預設事件
①IE10之前：e.returnValue = false;

②IE10之後：e.stopPropagation();

function eventHandler(e) {
   e = e || window.event;
   // 防止預設行為   
   if (e.preventDefault) {  
       e.preventDefault(); //IE10之外   
   }else { 
       e.returnValue = false; //IE10之前   
  } 
}