《JavaScript忍者秘籍（第二版）》学习笔记

流程图

一、页面构建

1. 解析HTML代码并构建文档对象模型（DOM）
2. 执行JavaScript代码

一般来说，JavaScript代码能够在任何程度上修改DOM结构：它能创建新的接单或移除现有DOM节点。但它依然不能做某些事情，例如选择和修改还没被创建的节点。这就是为什么要把script元素放在页面底部的原因。

二、事件处理

浏览器执行环境的核心思想基于：同一时刻只能执行一个代码片段，即所谓的单线程执行模型。

浏览器需要一种方式来跟踪已经发生但尚未处理的事件。为实现这个目标，浏览器使用了事件队列。

如果浏览器在队列头中检测到了事件，则取出该事件并执行相应的事件处理器。

• 异步事件：

  • 浏览器事件，例如当页面加载完成后或无法加载时；
  • 网络事件，例如来自服务器的响应（Ajax事件和服务器端事件）；
  • 用户事件，例如鼠标单击、鼠标移动和键盘事件；
  • 计时器事件，当timeout时间到期或又触发了一次时间间隔。

• 注册事件处理器

  1. 通过把函数赋给某个特殊属性；

     window.onload = () => {}
     document.body.onclick = () => {}
     

  2. 通过使用内置addEventListener方法。

     不推荐使用第1种方式，缺点：对于某个事件只能注册一个事件处理器，一不小心就会将上一个事件处理器改写掉。

     addEventListener方法让我们能够注册尽可能多的事件。

在同一时刻，只能处理多个不同事件中的一个，处理顺序是事件生成的顺序。事件处理阶段大量依赖事件队列，所有的事件都以其出现的顺序存储在事件队列中。事件循环会检查实践队列的队头，如果检测到了一个事件，那么相应的事件处理器就会被调用。

• 练习

  1. 客户端Web应用的两个生命周期阶段是什么？

     页面构建、事件处理

  2. 相比将事件处理器赋值给某个特定元素的属性上，使用addEventListener方法来注册事件处理器的优势是什么？

     某个事件可以注册多个事件处理器

  3. JavaScript引擎在同一时刻能处理多少个事件？

     1个

  4. 事件队列中的事件是以什么顺序处理的？

     生成顺序