优化性能：理解与应用事件委托-优快云博客

本文链接：https://blog.youkuaiyun.com/forever__fish/article/details/132810211

一、为什么要用事件委托

当 dom 有事件处理程序时，我们一般都会直接给它设置事件处理程序，设想一下，如果在一个父元素中有很多个 dom 需要添加事件处理呢？比如 ul 中处在100个 li，每个 li 都有相同的 click 事件，在每个 li 上都添加事件，会存在什么影响呢？

在 JS 中，添加到页面上的事件处理程序的数量将直接关系到页面的整体运行性能，因为需要不断的与 dom 节点进行交互，访问 dom 的次数越多，引起浏览器重绘与重排的次数也就越多，那么就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少 dom 操作的原因。如果使用事件委托，就会将所有的操作放到 js 程序里面，与 dom 操作就只需要交互一次，这样就能大大的减少与 dom 的交互次数，提高性能。

每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差，如果使用事件委托，那么我们就可以只对它的父级（如果只有一个父级）这一对象进行操作，这样我们就需要一个内存空间就够了。

二、事件委托的原理

事件委托是利用事件的冒泡原理来实现的，事件冒泡就是指事件从最深的节点开始，然后逐步向上传播事件，委托它们的父级代为执行事件。

三、例子

题目为：点击父元素中的 li 标签，改变 li 标签的内容。

<body>
    <div>
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <li>序号1</li>
        <li>序号2</li>
        <li>序号3</li>
        <li>序号4</li>
    </div>

    <script>
        let div = document.querySelector('div');
        div.addEventListener('click', (e) => {
            // 只有父元素中的 li 改变
            if(e.target.nodeName.toLowerCase() == 'li') {
                e.target.innerTest = '序号9';
            }
        })
    </script>
</body>