什么是事件委托？

一、事件委托的概念

事件委托（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、动态元素：当需要为添加到页面中的动态元素绑定事件时，使用委托方式能够避免事件处理器无法绑定的问题。

五、总结

事件委托是一种优秀的事件处理方式，能够大大提高代码的可维护性和性能。在需要为多个子元素添加事件处理器时，使用委托方式是一个不错的选择。