js事件委託機制簡述

事件委託又叫事件代理，是指利用事件冒泡的特性，將本應該註冊在子元素上事件註冊在父元素上，由父元素來處理子元素的事件。這樣的好處是：

（1）有助於降低DOM操作，提高性能。

（2）增加擴展性，子元素可以隨意增加，不用再做其他額外的操作，都在父元素上做事件處理操作

（3）有助於代碼簡潔高效性，不用爲每個子元素添加事件處理程序，簡化了代碼處理邏輯。

例子如下：

    <!-- 事件委託 -->
    <ul class="ul">
        <li id="one">打球</li>
        <li id="two">跑步</li>
        <li id="three">游泳</li>
        <li id="four">俯臥撐</li>
    </ul>
    <script>
        document.querySelector('.ul').addEventListener('click', function(e){
            // 使用e.target獲取目標元素
            console.log(`id爲 '${e.target.id}' 對應的文本是 '${e.target.innerText}'`)
        })
    </script>

可以看出，li元素的點擊事件都委託給ul元素了，當點擊某個li元素時，事件會冒泡到ul元素，執行ul元素綁定的事件監聽函數。e.target值指向點擊的目標元素，通過它可以處理子元素相關邏輯。