• 【性能优化】事件委托

    一、为什么要用事件委托

    当 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>

  • 相关阅读:
    小程序第三章总结
    LeetCode 110平衡二叉树 257.二叉树的所有路径 404左叶子之和
    PTA 7-231 买文具
    【Qt】使用Qt实现Web服务器（二）：QtWebApp示例源码
    【javaEE】网络原理（应用层）
    多表操作-外键级联操作
    Python中list的操作4-3
    Java Swing游戏开发学习25
    GDB调试CoreDump文件
    生物信息学笔记03 -- 基因组序列分析 方法
  • 原文地址：https://blog.csdn.net/forever__fish/article/details/132810211