什麼是事件委託？

一、事件委託的概念

事件委託（Event Delegation）指的是，將事件處理器（Listener）添加到某一個元素上，觸發事件時該元素會進行冒泡處理，最終被添加的事件處理器會被執行。這種方式相對於將事件處理器添加到每一個子元素上來說，具有更好的性能和可維護性。

比如，我們可以將一個 ul 列表元素上的點擊事件委託給其子元素 li，當 li 被點擊時，ul 中的事件處理器將被觸發並執行相應的操作。

二、事件委託的優點

事件委託的主要優點有：

1、提高性能：將事件處理器添加到父元素上，減少了子元素的事件處理器數量，從而提高了頁面的性能。

2、動態更新：當新增或刪除子節點時，無需再一次添加或刪除事件處理器，委託的事件處理器能夠自動更新。

3、代碼簡潔：將事件處理器委託給父節點，大大減少了重複代碼的編寫。

三、如何實現事件委託

實現事件委託的方法是通過事件冒泡來實現的，我們可以將事件處理器添加到父節點上，從而觸發事件冒泡，最終被委託的事件處理器將被執行。

以滑鼠點擊為例，當點擊一個子元素時，瀏覽器不僅會首先觸發子元素的事件處理器，還會一層一層地向上冒泡，直到最外層的父元素，最終觸發委託的事件處理器。

    <ul id="list">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
    </ul>
    
    <script>
        var list = document.querySelector('#list');
        list.addEventListener('click', function(event) {
            var target = event.target;
            if(target.nodeName.toLowerCase() === 'li') {
                console.log(target.innerHTML);
            }
        });
    </script>

在上面的代碼中，我們給 ul 元素添加了一個點擊事件處理器，然後在處理器中判斷點擊的元素是否為 li 標籤，如果是，則列印該元素的 innerHTML 屬性值。

四、使用場景

事件委託適用於以下場景：

1、列表元素：當需要為一個包含多個子元素的列表元素添加事件處理器時，委託的方式能夠大大減少代碼量。

2、表單校驗：在表單中，我們需要對每一個表單元素添加校驗邏輯，使用事件委託能夠避免重複編寫校驗邏輯的問題。

3、動態元素：當需要為添加到頁面中的動態元素綁定事件時，使用委託方式能夠避免事件處理器無法綁定的問題。

五、總結

事件委託是一種優秀的事件處理方式，能夠大大提高代碼的可維護性和性能。在需要為多個子元素添加事件處理器時，使用委託方式是一個不錯的選擇。