DOM事件委托、动态渲染页面流程

事件委托解释

• 优点
  • 减少事件的注册，只需要注册化父容器
  • 可以为已存在和未来的元素注册事件，注册一次，现在未来通用
• 原理：
  • 利用冒泡
  • 使用场景：动态的渲染的元素的事件注册使用委托，动态渲染的元素的事件只能使用委托

捕获阶段和冒泡阶段说明

• 事件捕获
• 概念: 从DOM的根元素开始去执行对应的事件 (从外到里)
• 捕获机制必须使用事件监听的形式注册
• DOM.addEventListener(事件类型, 事件处理函数, 是否使用捕获机制)
  • 第三个参数为true:捕获阶段触发事件
  • false代表冒泡阶段触发事件-默认值

• 事件冒泡
• 概念: 当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
• 事件冒泡的必要性
  • 如果没有冒泡.给大盒子注册点击事件, 点击的是里面的小盒子,会导致大盒子的点击无法执行
• 事件委托
  • 自己不注册事件,将对应的事件注册给祖先元素
  • 减少事件的注册,提高效率
  • e.target => 当前点击的那个元素
• 阻止事件冒泡
  1. 先要明确那一块区域不能冒泡
  2. 需要阻止什么事件传递就给这块区域的最大盒子注册该事件
  3. 在事件处理函数里面接受事件对象, 并添加上e.stopPropagation()

渲染页面流程

前提：渲染必须需要 数据 和 静态结构

1. 准备数据
   • 一般是后台传输过来
2. 准备好静态结构
   • 静态结构包括HTML结构和CSS样式
3. 数据一般是对象数组(数组里面的每个元素都是对象)，所以需要遍历拼接
   • 要将数据放进结构中所以需要拼接
4. 定义一个字符串用于拼接
   • 一般可以定义一个空字符串 let string = ''的这种形式
5. 使用某种循环遍历数据源
   • 利用for循环可以遍历数据源，获取到全部数据，存储在你定义的字符串里
6. 拼接字符串，将数据进行替换
   • 将要更改的数据以'${数组的某一项.属性}'这种形式放入结构中
7. 将拼接生成好的结构渲染到指定位置
   • 将拼接好的字符串以inner的形式放回指定位置，就能看到渲染出来的数据结构
     格式例如下图：

效果图如下： 实现动态加减数量，删除商品等功能，同时计算总数 代码功能如下：

数据驱动视图，双向数据绑定

• 元素操作一定要体现到数据，数据操作也要体现到元素
• 元素操作一定要体现到数据，用户操作是的界面元素，但是本质 上操作数据
• 这点和vue的数据驱动视图，双向数据绑定其实原理是一样的。

以上内容属于个人对于事件委托和动态渲染页面的一些见解，没有深层次的进行剖析，如有不正之处，欢迎大家指正交流，大家一起交流学习