DOM 事件委托

事件委托，是一种通过事件捕获和事件冒泡实现的事件处理模式。通俗的讲，就是把一个元素的响应事件委托到另一个元素上。

举个例子，如果我们有很多相似方式处理的元素，就没有必要给每个元素分配一个处理事件。这时候，我们就要把元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制触发它的外层元素的绑定事件，然后在外层元素上执行函数。

事件委托优点

1. 减少内存消耗

假设我们有 100 个元素，如果我们创建 100 个相同的元素监听事件，那么需要创建 100 个内存地址来存储，这样对于内存的消耗是非常大的，需要消耗很多性能。而我们绑定到外层元素，那么只需要创建一个内存地址存储就可以，所以事件委托可以减少大量的内存消耗，节约效率。

2. 监听动态元素

此时，如果我们不确定有多少元素需要绑定，我们通过绑定外层元素，通过 e.target 匹配目标元素，就可以实现动态监听了，如果不匹配，可以通过递归向上查找外层元素继续进行匹配，直至匹配成果，或者匹配失败取消函数的执行。

我们可以通过封装一个函数来实现事件委托

function addEvent(element, eventType, selector, fn) {
    element.addEventListener(event, (e) => {
        const el = e.target
        while (!el.matches(selector)) {
            if (element === el) {
                el = null
                break
            }
            el = el.parentNode
        }
        el && el.call(el, e, el)
    })
}

总结

事件委托是 DOM 事件最有用的模式之一。

它通常用于为许多相似的元素添加相同的处理，对于 DOM 的批量操作也非常有效，但不局限于此。