JS事件流模型

1. JS事件流模型

事件流模型可以被概括为三个阶段：捕获阶段，目标阶段和冒泡阶段。这个模型是在DOM（文档对象模型）中定义的，用于描述事件如何在DOM元素中传播。

• 1. 捕获阶段：在事件到达其目标元素之前，事件首先会从顶层（通常是document对象）开始，通过DOM树向下传递。这个阶段被称为事件捕获。在捕获阶段，事件处理器会对从顶层开始，一直到目标元素的所有元素触发处理程序。
• 2. 目标阶段：在事件到达目标元素时，事件处理器会对目标元素执行处理程序。这个阶段被称为目标阶段。
• 3. 冒泡阶段：在离开目标元素后，事件会返回到它来自的元素，这个阶段被称为冒泡阶段。冒泡过程中，每个元素都有机会处理事件，直到事件到达最初的那个顶层元素。

• 通过调用event.stopPropagation()方法来阻止事件进一步冒泡
• 通过调用event.stopImmediatePropagation()来阻止事件冒泡并阻止任何其他同类型事件的处理程序被调用
• 大部分事件（例如点击事件），浏览器会默认只在冒泡阶段处理它们。如果需要在捕获阶段处理这些事件，可以使用addEventListener()方法的第四个参数，将其设定为true（表示在捕获阶段处理事件）。
• 也有一些特殊的事件，如 focus 和 blur 事件，则只在捕获阶段触发

var element = document.getElementById("myElement");

element.addEventListener(
  "click",
  function (event) {
    console.log("捕获阶段");
  },
  true
);

element.addEventListener(
  "click",
  function (event) {
    console.log("冒泡阶段");
  },
  false
);

2. JS事件循环

JavaScript 事件循环的基本步骤：

1. 调用栈：当一个 JavaScript 程序开始执行时，从顶部开始，逐行执行代码。每行代码执行完后，将结果推入调用栈。
2. 任务队列：当遇到异步事件（如定时器、网络请求等）时，事件处理程序被放入任务队列中，等待调用栈为空时才执行。
3. 事件循环：当调用栈为空时，事件循环会检查任务队列，并将任务添加到调用栈中执行。然后再次清空调用栈，重复此过程。

具体来说，JavaScript 的事件循环有以下几个步骤：

1. 脚本执行：从调用栈的顶部开始，执行脚本代码。
2. 任务调度：当脚本执行遇到异步事件（如 setTimeout, fetch 等）时，这些事件会被添加到任务队列中。
3. 微任务调度：在每个事件循环中，首先处理微任务队列（如 Promise, setImmediate 等）。微任务通常比宏任务（如 setTimeout, fetch 等）更快。
4. 宏任务调度：处理完微任务后，处理宏任务队列（如 setTimeout, fetch, UI 渲染等）。
5. 重复：再次从调用栈开始执行脚本，重复以上步骤。

以上就是 JavaScript 的事件循环机制，它确保了代码的顺序和异步执行。