js 事件流模型
JavaScript的事件流模型可以被概括为三个阶段：捕获阶段，目标阶段和冒泡阶段。这个模型是在DOM（文档对象模型）中定义的，用于描述事件如何在DOM元素中传播。
- 捕获阶段：在事件到达其目标元素之前，事件首先会从顶层（通常是document对象）开始，通过DOM树向下传递。这个阶段被称为事件捕获。在捕获阶段，事件处理器会对从顶层开始，一直到目标元素的所有元素触发处理程序。
- 目标阶段：在事件到达目标元素时，事件处理器会对目标元素执行处理程序。这个阶段被称为目标阶段。
- 冒泡阶段：在离开目标元素后，事件会返回到它来自的元素，这个阶段被称为冒泡阶段。冒泡过程中，每个元素都有机会处理事件，直到事件到达最初的那个顶层元素。
注意，在某些情况下，开发者可以在事件处理函数中通过调用event.stopPropagation()方法来阻止事件进一步冒泡。同样，他们也可以通过调用event.stopImmediatePropagation()来阻止事件冒泡并阻止任何其他同类型事件的处理程序被调用。
另外，对于某些事件（例如点击事件），浏览器会默认只在冒泡阶段处理它们。如果需要在捕获阶段处理这些事件，可以使用addEventListener()方法的第四个参数，将其设定为true（表示在捕获阶段处理事件）。
这就是JavaScript的事件流模型。
例如，下面的代码演示了如何通过 addEventListener()方法，在捕获阶段和冒泡阶段分别监听同一个事件：
var element = document.getElementById("myElement");
element.addEventListener(
"click",
function (event) {
console.log("捕获阶段");
},
true
);
element.addEventListener(
"click",
function (event) {
console.log("冒泡阶段");
},
false
);
当元素被点击时，首先会触发捕获阶段的事件处理函数，然后再触发冒泡阶段的事件处理函数。
需要注意的是，大部分事件都是在冒泡阶段进行处理。
但也有一些特殊的事件，如 focus 和 blur 事件，则只在捕获阶段触发。
此外，通过调用 event.stopPropagation()方法可以阻止事件继续传播，即停止冒泡或捕获。
更多详细内容，请微信搜索“前端爱好者“， 戳我 查看 。
js 事件循环
JavaScript 的事件循环是其执行机制的核心，它决定了代码的执行顺序和时间。以下是 JavaScript 事件循环的基本步骤：
- 调用栈：当一个 JavaScript 程序开始执行时，从顶部开始，逐行执行代码。每行代码执行完后，将结果推入调用栈。
- 任务队列：当遇到异步事件（如定时器、网络请求等）时，事件处理程序被放入任务队列中，等待调用栈为空时才执行。
- 事件循环：当调用栈为空时，事件循环会检查任务队列，并将任务添加到调用栈中执行。然后再次清空调用栈，重复此过程。
具体来说，JavaScript 的事件循环有以下几个步骤：
- 脚本执行：从调用栈的顶部开始，执行脚本代码。
- 任务调度：当脚本执行遇到异步事件（如 setTimeout, fetch 等）时，这些事件会被添加到任务队列中。
- 微任务调度：在每个事件循环中，首先处理微任务队列（如 Promise, setImmediate 等）。微任务通常比宏任务（如 setTimeout, fetch 等）更快。
- 宏任务调度：处理完微任务后，处理宏任务队列（如 setTimeout, fetch, UI 渲染等）。
- 重复：再次从调用栈开始执行脚本，重复以上步骤。
以上就是 JavaScript 的事件循环机制，它确保了代码的顺序和异步执行。
