他們是描述元素上js事件觸發時序問題的術語。事件捕獲指的是從document到觸發事件的那個節點，即自上而下的去觸發事件。相反的，事件冒泡是自下而上的去觸發事件。綁定事件方法的第三個參數，就是控制事件觸發順序是否爲事件捕獲。true,事件捕獲；false,事件冒泡，默認false,即事件冒泡,下面事件中，parent即是事件冒泡，child是事件捕獲。藍色是利用原生方法增加冒泡/捕獲監聽，紅色是使用jquery方法增加監聽，同時，紅色方法是ui事件方法利用冒泡原理實現子元素委託父元素處理觸發的事件，點擊li子元素時，相當於點擊了ui父元素，觸發click事件，執行回調方法，委託情況下，觸發事件源是不變的，依舊是子元素，此時只需要爲父元素綁定一個事件，子元素不需要綁定事件，即可處理多個相同子元素的事件，大大提高了效率和頁面性能，同時解決動態添加元素導致不能觸發的問題。。
適用性：
適合：click 、mousedown、mouseup、keydown 、keyup、keypress
不適合：mouseover和mouseout雖然也有事件冒泡，但是處理他們要特別注意，因爲需要經常計算他們的位置，處理起來不太容易，
focus、blur之類的本身就沒有冒泡的特性，自然不能用事件委託；
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
window.onload = function() {
document.getElementById("parent").addEventListener("click", function(e) {
alert("parent事件被觸發，" + this.id);
}, false)
document.getElementById("child").addEventListener("click", function(e) {
alert("child事件被觸發，" + this.id)
}, false)
document.getElementById("ul1").addEventListener("mouseover", function(e) {
alert("li事件被觸發，" + this.id)
}, false)
$("ul").on("mouseover", function(e) {
$(e.target).css("background-color", "#ddd").siblings().css("background-color", "white");
})
$("ul").on("mouseover", "li", function(e) { //使用子元素選擇器
$(e.target).css("background-color", "#ddd").siblings().css("background-color", "white");
})
}
</script>
</head>
<body>
<div id="parent">
i am father
<div id="child" class="child"> i am children</div>
<div>
<ul id="ul1">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
</div>
</div>
</body>
</html>學習來源：
https://www.cnblogs.com/qq9694526/p/5653728.html
https://blog.csdn.net/z69183787/article/details/54019756