小程序事件与react和vue的比较、宏任务和微任务的区别

91 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第33天,点击查看活动详情

事件

1. 事件流的三个阶段

  1. 捕获: 从外向内
  2. 执行目标阶段
  3. 冒泡: 从内向外

2. 事件委托

  1. 什么是事件委托
    1. 将子元素的事件委托(绑定)给父元素
  2. 事件委托的好处
    1. 减少绑定的次数
    2. 后期新添加的元素也可以享用之前委托的事件
  3. 事件委托的原理
    1. 冒泡
  4. 触发事件的是谁
    1. 子元素
  5. 如何找到触发事件的对象
    1. event.target
  6. currentTarget VS target
    1. currentTarget要求绑定事件的元素一定是触发事件的元素
    2. target绑定事件的元素不一定是触发事件的元素

3. 定义事件相关

  1. 分类
    1. 标准DOM事件
    2. 自定义事件
  2. 标准DOM事件
    1. 举例: clickinput。。。
    2. 事件名固定的,事件由浏览器触发
  3. 自定义事件
    1. 绑定事件
      1. 事件名
      2. 事件的回调
      3. 订阅方: PubSub.subscribe(事件名,事件的回调) --->PubSub插件
      4. 订阅方是接受数据的一方
    2. 触发事件
      1. 事件名
      2. 提供事件参数对象, 等同于原生事件的event对象
      3. 发布方: PubSub.publish(事件名,提供的数据) --->PubSub插件
      4. 发布方是提供数据的一方

宏任务和微任务的区别

  • 在浏览器运行到js代码的时候,由于js是单进程单线程的,会先执行同步任务,在执行同步任务中可能会遇到setTimeout,setTimeout就属于宏任务,会把宏任务放到任务队列,接着执行同步任务,然后又可能遇到微任务,promise本身是同步任务,而它的.then()是异步的,then()就属于微任务,微任务进入另外一个任务队列。
  • 直到同步任务执行完以后,js回过头看有哪些微任务可以执行,微任务执行完以后再去执行放在栈顶的宏任务,依次执行下去,在宏任务中还有js代码,可能又有同步任务,依次循环执行。
  • 注意:如果微任务在执行的同时又有了新的微任务需要加入进来,会把这个新的微任务执行完以后才去执行宏任务。