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值指向点击的目标元素，通过它可以处理子元素相关逻辑。