何为事件驱动模式 用代码举例说明 JavaScript中 JS中事件类型分类 文字陈述和代码 2 1 (何为事件驱动程序)

本文目录导航：

JavaScript中，1）何为事件驱动模式（文字陈述和代码） 2）JS中事件类型分类（用代码举例说明）
面试必问之 JS 事件循环(Event Loop)，看这一篇足够
Node.js 什么是Node.js、Node.js特点

JavaScript中，1）何为事件驱动模式（文字陈述和代码） 2）JS中事件类型分类（用代码举例说明）

12.2事件驱动与事件处理事件驱动是JavaScript响应用户操作的一种处理方式，而事件处理是JavaScript响应用户操作所调用的程序代码。

12.2.1事件驱动在多年以前，计算机程序通常是以批处理的模式运行。

所谓批处理，就是开发者事先写好一些代码，再将这些代码一次运行。

这种处理方式有点类似于通过HTML代码直接编写的网页。

浏览器只是将HTML代码逐行解析，并显示在浏览器窗口。

后来，在批处理模式中，开发者可以加入一些特定的代码，在程序批处理期间，可以停下来等待用户输入一些信息，并根据用户输入的信息来判断和执行某个程序分支，这就使程序有了初步的交互性。

随着鼠标、触摸屏等设备的出现，批处理时代就逐渐远去，取而代之的是事件驱动的时代。

当然，批处理也还能使用，只是使用的范围和频率比事件驱动要少得多。

以鼠标为例，在事件驱动中，用户可以使用鼠标单击等方式进行操作，程序则根据鼠标指针的位置以及单击的方式进行响应。

JavaScript使用的就是这种事件驱动的程序设计方式。

在JavaScript中，事件（Even）包括以下两个方面：● 用户在浏览器中产生的操作是事件，如单击鼠标、按下键盘上的键等。

● 文档本身产生的事件，如文档加载完毕、卸载文档等，都是事件。

12.2.2事件处理在JavaScript中，浏览器会使用事件来通知JavaScript程序响应用户的操作。

事件的类型有很多种，如鼠标事件、键盘事件、加载与卸载事件、得到焦点与失去焦点事件等。

在事件产生的时候，浏览器会调用一个JavaScript程序来响应这个事件，这就是JavaScript的事件处理方式。

要想让浏览器可以调用合适的JavaScript程序，就必须要做到以下 3点：（1）设置HTML文档中响应事件的元素。

在一个HTML文档中，并非所有元素都会去响应事件。

就鼠标单击事件而言，一般在HTML文档的正文不会响应该事件，但在按钮中一般都会响应该事件。

（2）设置元素响应事件的类型。

在确定了哪些元素响应事件之后，要设置该元素响应事件的类型。

例如，一个按钮通常会响应鼠标单击事件（click事件），而一个下拉列表框通常会响应选项变化事件（change事件）。

在同一个元素中，也可以响应多个事件。

例如，一个超链接，在鼠标移动到该超链接上时，可以响应鼠标移动到对象上事件（mouseover事件），当鼠标从超链接上移开时，又可以响应鼠标移开事件（mouseout事件）。

（3）设置响应事件的程序。

为了让浏览器可以响应事件，必须要设置响应事件的程序。

例如一个按钮被单击时，浏览器会响应这个click事件，此时浏览器就会在JavaScript中寻找一个合适的程序，并运行该程序。

这个程序可以是用户自定义的函数，也可以是一段JavaScript代码，还可以是JavaScript内置对象的方法等。

看看这个更详细

何为事件驱动模式用代码举例说明 JavaScript中 JS中事件类型分类文字陈述和代码 2 1 (何为事件驱动程序)

面试必问之 JS 事件循环(Event Loop)，看这一篇足够

理解 JavaScript 的事件循环（Event Loop）是前端开发者的基础知识，面试时也经常被问及。

事件循环涉及宏任务和微任务、JavaScript 的单线程执行过程以及浏览器异步机制。

浏览器和 NodeJS 中的事件循环机制有所不同，但最终表现基本一致。

在浏览器中，JS 是单线程的，但浏览器是多线程的。

当需要执行异步任务时，浏览器会启动其他线程。

异步任务在其他线程执行，主 JS 线程继续执行同步代码。

浏览器中包含多个进程，如渲染进程、GPU 进程等，每个标签页都是独立的渲染进程。

渲染进程中包含了 JS 引擎线程、HTTP 请求线程和定时器线程，为 JS 异步任务提供基础。

事件驱动机制是异步任务执行原理的核心，触发事件、任务选择和任务执行由事件驱动完成。

事件触发可以是用户操作（如点击事件）或程序自动触发（如定时器）。

事件循环则负责管理和执行事件流程。

实现游戏场景中的按钮点击与人物移动时，有事件驱动和状态驱动两种方法。

事件驱动下，按钮点击触发界面渲染事件，立即重新渲染。

状态驱动下，点击后修改坐标，不立即渲染，启动定时器或使用 requestAnimationFrame 来检测坐标变化后重新渲染。

浏览器点击事件处理也是基于事件驱动。

浏览器事件循环涉及执行栈和任务队列。

JS 解析代码时，将同步代码排入执行栈，依次执行。

遇到异步任务时交给其他线程，执行栈同步任务完成后，从任务队列取出异步回调执行。

异步任务完成后，回调返回任务队列等待执行。

任务队列分为微任务队列和宏任务队列。

事件循环中，先检查微任务队列，没有后检查宏任务队列。

微任务优先执行，宏任务等待下一次循环。

常见宏任务包括 setTimeout、setInterval 和事件处理器等。

微任务则包括和等。

代码中使用 Promise、setTimeout 和微任务演示了执行顺序：同步代码、、setTimeout。

计时器设置为 0 的情况下，计时器默认延时为 4ms 或 1ms，具体值可能不固定。

在同步代码之后优先执行。

setTimeout 的回调在所有同步代码之后执行。

代码演示了计时器误差：如果同步代码耗时长，计时器误差会增大。

微任务队列执行会影响计时，例如死循环或递归启动其他微任务可能导致宏任务永远无法执行。

事件循环模型在 NodeJS 中主要由 Libuv 库实现，与浏览器略有差异，但最终表现基本一致。

NodeJS 中 JS 执行过程分为多个阶段，每个阶段有自己的任务队列，优先执行微任务队列。

不同异步操作类型在不同阶段执行，如和 setImmediate 在不同执行阶段。

总结，理解事件循环原理有助于准确分析异步代码执行顺序，优化代码执行效率。

在面试中，事件循环相关知识有助于提高通过率，增强自信心。