• 【性能优化】事件委托

    一、为什么要用事件委托

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

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

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

    二、事件委托的原理

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

    三、例子

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

    1. <body>
    2.     <div>
    3.         <button>按钮1button>
    4.         <button>按钮2button>
    5.         <button>按钮3button>
    6.         <li>序号1li>
    7.         <li>序号2li>
    8.         <li>序号3li>
    9.         <li>序号4li>
    10.     div>
    11.  
    12.     <script>
    13.         let div = document.querySelector('div');
    14.         div.addEventListener('click', (e) => {
    15.             // 只有父元素中的 li 改变
    16.             if(e.target.nodeName.toLowerCase() == 'li') {
    17.                 e.target.innerTest = '序号9';
    18.             }
    19.         })
    20.     script>
    21. body>

  • 相关阅读:
    μC/OS-II---整理学习1
    文档管理系统如何为 4 家制造商提供竞争优势
    【Linux升级之路】7_进程信号
    sessionStorage / localStorage / cookie 存储的都是字符串类型
    阿里内部人手一份！P8大佬也叫好的 高性能MySQL系列
    基于Cat混沌与高斯变异的改进灰狼优化算法-附代码
    CMake
    moc_ XX.cpp 中的函数没有定义
    rabbitMQ的Topic模式的生产者与消费者使用案例
    Jenkins 设置定时任务
  • 原文地址：https://blog.csdn.net/forever__fish/article/details/132810211