這篇文章主要介紹了一JS的事件冒泡和事件捕獲,通過代碼舉例詳細描述了兩者之間的差別,需要的朋友可以參考下
在學校，聽老師講解事件冒泡和事件捕捉機制的時候跟聽天書一樣，只依稀記得IE使用的是事件冒泡，其他瀏覽器則是事件捕獲。當時的我，把它當成IE瀏覽器相容問題，所以沒有深究（IE8以下版本的瀏覽器已基本退出市場）。工作至今，雖然多次遇到該類問題，但均未深究，始終一知半解，遇到了全TM靠猜（選A不行就選B唄）。今天閒來無事自己做了個demo,算是把這個問題徹底搞明白了。
先下結論：他們是描述事件觸發時序問題的術語。事件捕獲指的是從document到觸發事件的那個節點，也就是自上而下的去觸發事件。相反的，事件冒泡是自下而上的去觸發事件。綁定事件方法的第三個參數，就是控制事件觸發順序是否為事件擷取。 true,事件捕獲；false,事件冒泡。預設false,即事件冒泡。 Jquery的e.stopPropagation會阻止冒泡，意思就是到我為止，我的爸爸和祖宗的事件就不要觸發了。
這是HTML結構
<p id="parent"> <p id="child" class="child"></p> </p>
現在我們給它們綁定上事件
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");
})是，這樣也行。而且從程式碼簡潔程度上，兩者是相若彷彿的。但是，前者少了一個遍歷所有li節點的操作，所以在效能上肯定是更優的。
還有就是，如果我們在綁定事件完成後，頁面又動態的載入了一些元素…
$("<li>item7</li>"). appendTo("ul");
這時候，第二種方案，由於綁定事件的時候item7還不存在，所以為了效果，我們還要給它再綁定一次事件。而利用冒泡方案由於是給ul綁的事件…
高下立判！
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
用p5.js製作煙火特效的範例程式碼_javascript技巧
以上是JS的事件冒泡和事件捕獲（圖文教程，簡單暴力）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
