JavaScript中事件执行机制是如何深入解析并影响页面响应的？

本文共计1783个文字，预计阅读时间需要8分钟。

本篇文章通过分析一段代码的打印顺序，深入探讨了JavaScript中事件执行机制。希望对大家有所帮助！

前期阶段，一道笔试题让人困惑。今天，我们一起来分析下JavaScript的事件执行机制。

在JavaScript中，事件执行机制通常涉及以下几个步骤：

1. 事件触发：当用户与页面进行交互（如点击、滚动等）或页面加载完成后，会触发相应的事件。

2.事件捕获：事件从顶层开始，逐层向下传播，直到到达目标元素。

3.事件处理：目标元素上的事件处理函数被调用。

4.事件冒泡：事件从目标元素向上传播，直到回到顶层。

以下是一个简单的示例：

javascript

document.addEventListener('click', function() { console.log('document clicked');});

document.body.addEventListener('click', function() { console.log('body clicked');});

document.querySelector('.my-element').addEventListener('click', function() { console.log('my-element clicked');});

在这个例子中，当点击`.my-element`元素时，以下打印顺序会发生：

1. `document clicked`：事件从顶层开始，首先到达`document`。

2.`body clicked`：然后到达`body`。

3.`my-element clicked`：最后到达目标元素`my-element`。

需要注意的是，事件冒泡和捕获的顺序可能会影响事件处理函数的执行。例如，如果我们改变上述代码中的事件监听器顺序：

javascript

document.querySelector('.my-element').addEventListener('click', function() { console.log('my-element clicked');});

document.body.addEventListener('click', function() { console.log('body clicked');});

document.addEventListener('click', function() { console.log('document clicked');});

那么，当点击`.my-element`元素时，打印顺序将变为：

1. `my-element clicked`：事件从目标元素开始，直接到达`my-element`。

2.`body clicked`：然后到达`body`。

3.`document clicked`：最后到达顶层`document`。

了解事件执行机制对于编写高效、可维护的JavaScript代码至关重要。希望本文能为大家提供一些帮助！

本篇文章通过分析一段代码的打印顺序，带大家深入了解一下javascript中的事件执行机制，希望对大家有所帮助！

前段时间一道笔试题，有点迷糊。今天彻底分析下JS的事件执行机制。

先看一段代码

各位小伙伴可以试着写出打印顺序

单线程

JS主要作为浏览器的脚本语言，Js的主要用途是操作DOM，这就决定了JS必须是单线程，如果JS如Java一样是多线程，如果两个线程同时操作DOM，那么浏览器应该怎么执行呢？

JS的发布其实是为了蹭Java的热度，其中编写这门语言的时间并不久，所以这也就是为什么JS是单线程的原因

JS执行机制

JS既然是单线程，那么必然会对任务进行一个排序。所有的任务都将按照一个规则执行下去。

• 同步任务

• 异步任务

同步任务和异步任务进入执行栈中，JS会先判断任务的类型

• 是同步任务，直接进入主线程

• 是异步任务，进入Event Table中，注册回调函数Event Queue

• 同步任务全部执行结束，JS会Event Queue中读取函数执行

• 这个过程会反复执行，直到全部任务执行结束。这就是我们常说的事件循环

JS如何判断执行栈为空

emmmm，我不知道。。。。JS应该有一套自己独有的逻辑去判断执行栈是否为空。

异步任务

异步的任务执行顺序为：宏任务——>微任务

异步任务可分为

• 宏任务

• 微任务

常见的宏任务

• I/0

• setTimeout

• setInterval

常见的微任务

• Promise

• .then

• .catch

答案

vite 之前配置的一个插件，版本有些问题，不要管这个红色报警

分析

• 开始了 是一个同步任务，最先进入执行栈中

• 执行task()函数， a是一个同步任务，进入执行栈中

• async/await 是异步转同步的过程，第一行代码会同步执行，以下的代码会异步。b作为一个同步任务进入执行栈中

• a end成为了异步任务的微任务，进入执行栈中，

目前为止，同步任务队列依次是 开始了, a, b

目前为止，异步任务队列依次是 宏任务: setTimeout 微任务：a end

如果没有后续代码，打印顺序如下

那么问题来了，不是说宏任务会比微任务提前执行吗，为什么setTimeout打印在a end之后呢？

看这张图

setTimeout 作为了宏任务进入了任务队列。所以造成了这种原因

通俗来讲：

async await 导致了微任务的产生，但是这个微任务所属于当前的宏任务。所以会先执行a end，执行完毕判断当前宏任务结束。执行下一个宏任务，打印出了setTimeout

继续走流程

• c 由于Promise的转化，变为同步任务进入到任务队列中

• c end 作为Promise衍生的微任务进入任务队列

• d 作为同步任务进入任务队列

目前为止，同步任务队列

• a

• b

• c

• d

目前为止，异步任务队列

• a end 微任务

• c end 微任务

• setTimeout 宏任务

所以打印顺序如下

后记

自己对JS执行机制的理解，可能会有些不正确的地方，希望各位大佬指出。

以上就是深入分析下JS中的事件执行机制的详细内容，更多请关注自由互联其它相关文章！