事件与异步

事件与异步

事件绑定

• 分类

  • 传统事件绑定

    • 内联模型

      • <button onclick="tell();">弹出提示框</button>
        

      • 违反内容与行为相分离的原则

    • 脚本模型

      • document.getElementById('btn').onclick = function(){  }
        

      • 实现分离，但元素只能绑定一个监听函数

  • 现代时间绑定 —— DOM2级模型

    • 实现分离，可以绑定多个监听函数
    • **element.addEventListener(type， listener[， useCapture]) **
      • type：监听事件类型的字符串
      • listener：指定事件触发时执行的函数
      • useCapture：布尔值，true指定事件是否在捕获阶段触发，false指定事件在冒泡阶段执行

  • EventTarget对象

    • 继承于EventTarget的事件目标对象可以实现事件的分发，并可以为它们创建侦听器来捕获和响应事件
    • addEventListener（）：注册待定事件类型的事件处理程序
    • removeEventListener（type，listener）：删除事件监听器，具名函数可删除，匿名函数不可删除
    • dispatchEvent（）：向指定事件目标派发事件

事件流

• 事件流
  • 描述从页面接收事件的顺序
  • 模式：冒泡和捕获
• 冒泡
  • JS中的事件冒泡：从目标元素到根元素的顺序
  • event.stopPropagation（）：阻止事件冒泡
  • event.bubbles ： 返回布尔值，是否向上层冒泡
  • onmouseover onmouseout —— 支持冒泡
  • onmouseenter onmouseleave —— 不支持冒泡
  • 应用 —— 事件委托
    • 可以将事件监听器设置在其父节点上，并将事件监听器的影响设置为每个子节点
• 捕获设置
  • element.addEventListener(type， listener[， useCapture])
• 事件处理周期 ： 触发一个事件后，在HTML元素间传播的过程
  • 事件捕获：事件对象沿DOM树向下传播
  • 目标触发：执行监听函数
  • 事件冒泡：事件对象沿DOM树向上传播

异步

• 进程和线程

• 浏览器是多进程的

  • Browser进程（主进程，1个）（协调，主控）
  • Plugin进程 —— 第三方插件进程
  • GPU进程（最多一个，3D绘制）
  • Renderer —— 浏览器渲染进程（浏览器内核） （内部多线程）
    • GUI 渲染线程
    • JS 引擎线程（单线程）
    • 事件触发线程
    • 定时触发器线程
    • HTTP 请求线程
    • GUI 渲染线程与 JS 引擎线程互斥

• 任务：同步任务，异步任务（注册回调函数行为）

• 事件轮询

  • 消息队列、事件循环

• 定时器：主程序执行完毕后执行

  • setTimeout（function（）{
        …… ……
    }，1000）
    

• 程序执行过程

  • 执行同步任务—> 渲染 —> 任务队列取出一个任务 （重复该过程）