事件委託，就是利用冒泡原理，把事件監聽器委託給父層，觸發執行。
不用每個子元素都單獨設定事件監聽器。在觸發子元素時，事件會冒泡到父層，父層監聽器就會觸發。
優點是：
- 減少監聽器的數量，提高效能，因為只需要綁定在父元素上。
- 對於新增或刪除的子元素也不需再額外設定事件監聽器。
缺點是：
- 需要判斷哪些子元素是我們要執行的項目
程式 demo
1<div id="container">2 <div class="card">3 <h2>Card 1</h2>4 <p>Lorem ipsum dolor sit amet.</p>5 <button class="remove_btn">delete</button>6 </div>7 <div class="card">8 <h2>Card 2</h2>9 <p>Lorem ipsum dolor sit amet.</p>10 <button class="remove_btn">delete</button>11 </div>12 <div class="card">13 <h2>Card 3</h2>14 <p>Lorem ipsum dolor sit amet.</p>15 <button class="remove_btn">delete</button>16 </div>17</div>
1document.getElementById("container").addEventListener("click", (event) => {2 const target = event.target;34 if (target.className === "remove_btn") {5 target.closest(".card").remove();6 }7});
如上圖，我們要的效果就是刪除 card。應用事件委託的方法就是，將click事件綁定在父層 container 上， 在點擊子層 remove_btn 時，藉由冒泡到父層執行程式。過程中就需要判斷如果 class name 是 remove_btn ，才將離該元素最近的父層card刪除。
