Js忍者秘籍-历久弥新的事件

1.事件循环

• 事件循环任务代表浏览器的执行行为，任务分为以下两类：
  – 宏任务：宏任务是分散的、独立的浏览器操作，如创建主文档对象、处理各种事件、更改URL等。

setTimeout、setInterval、postMessage、 MessageChannel、setImmediate

– 微任务：微任务是应该尽快执行的任务。包括promise回调和DOM突变。

Promise().then()、 MutaionObserver、process.nextTick(Node.js环境）

由于单线程的执行模型，一次只能处理一个任务，一个任务开始执行后不能被另一个任务终端。事件循环通常至少有两个事件队列：宏任务队列和微任务队列。流程图如下：

2.定时器

• 异步定时器提供延迟执行一段代码的能力，【至少】延迟指定的毫秒数。
• 使用setTimeout函数在指定的延迟时间后执行回调。
• 使用setInterval函数来启动一个定时器，将尝试在指定的延迟间隔执行回调、直至被清除。
• 两个函数均返回对应的计时器ID，通过clearTimeout和clearInterval函数，我们可以使用计时器ID来取消计时器。
• 使用计时器，将计算开销很高的代码分解成可管理的、不阻塞的浏览器的代码块。

3.事件代理和解耦

• DOM是元素的分层树，发生在一个元素(target)上的时间通常是通过DOM进行代理的，有以下两种机制。
  – 事件捕获模式：事件从顶部元素向下传递到目标元素。
  – 事件冒泡模式：事件从目标元素向上冒泡到顶部元素
• 当调用事件处理器时，浏览器也会传入一个事件对象。通过该对象的属性可访问发生事件的目标元素。通过处理器，使用this关键字引用在处理器上注册过的元素。通过处理器，使用this关键字引用在处理器上注册过的元素。
• 通过内置的CustomEvent构造函数和dispatchEvent方法，创建和分发自定义事件，减少应用程序不同部分之间的耦合。