zoukankan      html  css  js  c++  java
  • 数据渲染

    案例分析  原有的list中有三个li,并且每个li身上有onmouseover事件

    1.字符串拼接(最常用的方法)

    优点:只进行了一次DOM回流

    缺点:原有的DOM事件都会丢失

    丢失的原因:丢失的原因就在innerHTML这个属性,这个属性是返回或设置DOM中的内容,以字符串形式返回,拼接完之后是string类型,而onmouse这些属性是DOM元素对象身上的,所以这些onmouse系列的属性就丢失了

    2.模板

    模板的本质就是字符串

    3.DOM循环

    优点:原有的DOM身上的事件不会丢失,不影响其它的DOM元素

    缺点:DOM回流的次数过多,严重影响网页的性能

    4.文档碎片

    优点:既不影响原有的DOM的属性,也只回流一次

    缺点:新添加的元素的DOM事件还是失效的

    5.事件委托

    事件委托原理:利用的是事件冒泡机制,但并不是所有的事件都有冒泡机制,比如mouseenter、mouseleave

    无论上面的四种方法,新增的li有没有onmouseover事件,如果保证新增的li也拥有添加的事件,用DOM遍历添加事件是不行的,用事件委托

     

  • 相关阅读:
    二、VueRouter ---kkb
    一、Vue组件化 ---kkb
    React项目的一些配置以及插件
    四、React全家桶(二)
    三、React全家桶(一)
    二、React组件化
    扩展欧几里得算法(含严谨证明)
    bzoj4034 树上操作
    欧几里得算法(含严谨证明)
    noip2013 车站分级
  • 原文地址:https://www.cnblogs.com/panghexin/p/10530438.html
Copyright © 2011-2022 走看看