在學校，聽老師講解事件冒泡和事件捕獲機制的時候跟聽天書一樣，只依稀記得IE使用的是事件冒泡，其他瀏覽器則是事件捕獲。當時的我，把它當成IE瀏覽器兼容問題，所以沒有深究（IE8以下版本的瀏覽器已基本退出市場）。工作至今，雖然多次遇到該類問題，但均未深究，始終一知半解，遇到了全TM靠猜（選A不行就選B唄）。今天閑來無事自己做了個demo,算是把這個問題徹底搞明白了。

先上結論：他們是描述事件觸發時序問題的術語。事件捕獲指的是從document到觸發事件的那個節點，即自上而下的去觸發事件。相反的，事件冒泡是自下而上的去觸發事件。綁定事件方法的第三個參數，就是控制事件觸發順序是否為事件捕獲。true,事件捕獲；false,事件冒泡。默認false,即事件冒泡。Jquery的e.stopPropagation會阻止冒泡，意思就是到我為止，我的爹和祖宗的事件就不要觸發了。

這是HTML結構

  <div id="parent">　　  <div id="child" class="child"></div>  </div>

現在我們給它們綁定上事件

  document.getElementById("parent").addEventListener("click",function(e){  alert("parent事件被觸發，"+this.id);  })  document.getElementById("child").addEventListener("click",function(e){  alert("child事件被觸發，"+this.id)  })

結果：

child事件被觸發，child
parent事件被觸發，parent

結論：先child，然后parent。事件的觸發順序自內向外，這就是事件冒泡。

現在改變第三個參數的值為true

　　 document.getElementById("parent").addEventListener("click",function(e){  alert("parent事件被觸發，"+e.target.id);  },true)  document.getElementById("child").addEventListener("click",function(e){  alert("child事件被觸發，"+e.target.id)  },true)

結果：

parent事件被觸發，parent
child事件被觸發，child

結論：先parent,然后child。事件觸發順序變更為自外向內，這就是事件捕獲。

貌似沒什么卵用，上一個利用事件冒泡的案例，反正我是經常會用到。

　　<ul>  <li>item1</li>  <li>item2</li>  <li>item3</li>  <li>item4</li>  <li>item5</li>  <li>item6</li> </ul>

需求是這樣的：鼠標放到li上對應的li背景變灰。

利用事件冒泡實現：

　　$("ul").on("mouseover",function(e){   $(e.target).css("background-color","#ddd").siblings().css("background-color","white");  })

也許有人會說，我們直接給所有li都綁上事件也可以啊，一點也不麻煩，只要……

　　　$("li").on("mouseover",function(){   $(this).css("background-color","#ddd").siblings().css("background-color","white");  })