DOM事件流 (事件捕獲和事件冒泡）以及阻止默認事件和阻止冒泡事件

1. DOM事件流

事件流描述的是從頁面中接受事件的順序
事件發生時會在節點之間按照特定的順序傳播 這個傳播過程即DOM事件流

比如我們給一個div注冊了點擊事件
DOM事件流分為三個階段：
1、捕獲階段（從外往里
2、當前目標階段
3、冒泡階段（從里往外

• 冒泡事件：IE最早提出 時間開始由最里層的元素接收 然后逐級向上傳播到DOM最頂層節點的過程
• 事件捕獲：網景最早提出 由DOM最頂節點開始 然后逐級向下傳播到最里層元素的接收過程

注意：
1、js代碼中只能執行捕獲或者冒泡其中的一個階段
2、onclick和attachEvent只能得到冒泡階段
3、addEventListener(type,listener[,useCapture])第三個參數如果是true，表示在事件捕獲階段調用時間處理程序；如果是false（不寫默認就是false），表示在時間冒泡階段調用處理程序

<div class = 'father'>
   <div class = 'son'>son盒子</div>
</div>
<script>
   var son = document.querySelector('.son');
   son.addEventLisenter('click',function(){
      alert('son')
   },true)//第三個參數為true 所以處於捕獲階段  document -> html -> body -> son
   var son = document.querySelector('.father');
   son.addEventLisenter('click',function(){
      alert('father')
   },true)//第三個參數為true 所以處於捕獲階段  document -> html -> body -> son
//先彈出father 后彈出son



   var son = document.querySelector('.son');
   son.addEventLisenter('click',function(){
      alert('son')
   },false)//第三個參數為false 所以處於冒泡階段 son ->body -> html  -> document 
   var son = document.querySelector('.father');
   son.addEventLisenter('click',function(){
      alert('father')
   },false)//第三個參數為false 所以處於冒泡階段 son ->body -> html  -> document 
//先彈出son  后彈出father

</script>

2.阻止事件冒泡

標准寫法：利用事件對象里的stopPropagation()方法
非標准寫法（IE6-8）利用事件對象cancelBubble屬性

<div class = 'father'>
   <div class = 'son'>son盒子</div>
</div>
<script>
   var son = document.querySelector('.son');
   son.addEventLisenter('click',function(**e**){
      alert('son')
      e.stopPropagation();//阻止冒泡  stop 停止 propagation 傳播
      e.cancelBubble = true;//非標准  cancel 取消  bubble 泡泡
 },false) 
//只彈出son

   var son = document.querySelector('.father');
   son.addEventLisenter('click',function(){
      alert('father')
 },false)

</script>

3. 阻止默認行為
e.preventDefault() 該方法阻止默認事件（方法 ）
e.returnValue ie6-8使用（屬性 ）
阻止默認行為（事件） 讓鏈接不跳轉 或者 讓提交按鈕不提交

<a href="http://www.baidu.com">百度</a>
<form action="http://www.baidu.con">
 <input type="submit" value="提交" name="sub">
</form>
<script>
var a = document.querySelector('a');
a.addEventListener('click',function(e){
  e.preventDefault();//dom 標准寫法
}
//傳統方式
a.onclick = function(e){
  e.preventDefault();//普通瀏覽器
  e.returnValue; //低版本瀏覽器ie678  
  return false；//利用 return false也能阻止默認行為 沒有兼容性問題
</script>