• js 事件流模型
• js 事件循环

js 事件流模型

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

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

注意，在某些情况下，开发者可以在事件处理函数中通过调用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 事件循环的基本步骤：

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

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

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

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