首先明確一個概念，

js中事件包含三個階段：

1. 捕獲
2. 到達目標
3. 冒泡

 事件委託：將子元素上的事件委託給父元素監聽，從而無需對每一個子元素設定監聽事件。例如ul巢狀多個li，要點選時alert每個li的innerText

<ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

var ul=document.getElementById('ul');
function test(e){
    console.log(e.target.innerText);
}
ul.addEventListener('click',test,false);
 

addEventListener（event, cb,  true/false)

其中true代表捕獲階段執行，false代表冒泡階段執行（預設false）。

二者區別在於事件被執行於不同的階段，例如一個div>div的巢狀，捕獲執行則先外後內，冒泡階段先內後外

<div id="out">
    <div id="inner"></div>
</div>

var out=document.getElementById('out');
out.addEventListener('click',()=>{alert('out')},true);
var inner=document.getElementById('inner');
inner.addEventListener('click',()=>{alert('inner')},true);