DOM 事件委托

定义

在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能。导致这一问题的原因是多方面的。首先，每个函数都是对象，都会占用内存；内存中的对象越多，性能就越差。其次，必须事先指定所有事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间。

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

原理

事件委托利用了事件冒泡。我们把元素的事件委托到它的父层或者更外层元素上的时候，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制触发它的外层元素的绑定事件，然后在外层元素上执行函数。

监听动态元素

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

封装一个函数来实现事件委托的例子：

function addEvent(element, eventType, selector, fn) {
    if(!element instanceof Element){
    element = document.querySelecotr(element)
    }
    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)
    })
}