當網頁上有多個元素需要添加事件監聽器（Event Listeners）常會遇到一個問題:

Q: 要為每個元素都添加一個事件監聽器嗎？
A: 可能會導致程式碼變得冗長且難以維護喔...

JS事件委託的概念就是從這裡出現的，來看看是怎麼實現的吧!

什麼是事件委託？

它允許將事件監聽器附加到一個元素的祖先(父)元素來捕獲在後代元素上觸發的事件。
件單來說就不需要為每個後代元素單獨添加事件監聽器，而是將事件監聽器添加到祖先元素並
通過事件冒泡（Event Bubbling） 來處理後代元素的事件。

為什麼要使用？

優勢：

• 性能優化： 當有大量元素需要添加事件監聽器時使用事件委託可以減少內存消耗，因為只需要一個事件監聽器。

• 簡化程式碼： 事件委託使程式碼更加簡潔和易於維護，因為你不需要為每個元素都編寫事件處理程式碼。

• 處理動態生成的元素： 如果你的網頁上有動態生成的元素，它們在頁面加載後才存在，事件委託是處理這些元素的理想方式。

如何使用？

假設有一個HTML多個列表項列表：

<ul id="myList">
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
  <!-- 更多項目... -->
</ul>

想要在用戶單擊任何列表項時顯示相應的警告框。
使用事件委託將事件監聽器添加到 <ul> 元素上，而不是每個 <li> 元素上：

const myList = document.getElementById('myList');

myList.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    alert(`你單擊了 ${event.target.textContent}`);
  }
});

無論有多少個列表項只需一個事件監聽器就可以處理點擊事件。
當用戶單擊列表項時事件冒泡將觸發 <ul> 元素上的事件監聽器，並且通過 event.target 屬性來確定用戶單擊的是哪個列表項。

應用場景

• 列表、表格和其他元素的點擊事件處理。
• 動態生成的元素的事件處理。
• 無限滾動（Infinite Scroll）效果的實現。
• 表單驗證和提交的處理。
• 動畫效果的處理。

今天先介紹到這邊，感謝觀看!