JavaScript 中的事件与事件处理 – 完整的初学者指南

Source: Dev.to

什么是 JavaScript 中的事件？

事件 是在浏览器中发生的动作或情况，JavaScript 可以检测到它们。
事件使 JavaScript 能够响应 用户交互 和 浏览器行为，从而让网页具有交互性和动态性。

触发方式

• 👤 用户操作（点击、输入、悬停）
• 🌐 浏览器操作（页面加载、窗口大小改变、滚动）

常见示例

• 点击按钮
• 按下键盘键位
• 将鼠标悬停在元素上
• 加载网页

简单说来

事件 = 发生了某事 → JavaScript 做出响应

JavaScript 中的事件类型

JavaScript 提供了许多内置事件，按用途分组。

鼠标事件

由鼠标交互触发。

• click – 元素被点击时
• dblclick – 双击时
• mouseover – 鼠标进入元素时
• mouseout – 鼠标离开元素时

键盘事件

由键盘操作触发。

• keydown – 按键被按下时
• keyup – 按键被释放时

表单事件

由表单相关操作触发。

• submit – 表单提交时
• change – 输入值改变时
• focus – 输入获得焦点时
• blur – 输入失去焦点时

浏览器 / 窗口事件

由浏览器层面的活动触发。

• load – 页面加载完成时
• resize – 窗口尺寸改变时
• scroll – 页面滚动时

什么是事件处理？

事件处理 是编写在事件发生时运行的 JavaScript 代码的过程。它定义了 你的应用如何响应 用户操作。

流程

Event → Handler → Action

在 JavaScript 中处理事件的方式

处理事件主要有三种方式。

1. 行内事件处理（不推荐）

Click

不推荐的原因

• 将 HTML 与 JavaScript 混在一起
• 在大型项目中难以维护
• 可扩展性差
• 不利于关注点分离

2. DOM 属性方法

const button = document.querySelector("button");
button.onclick = function () {
  console.log("Button clicked");
};

缺点

• 同一事件只能有一个处理函数；新的赋值会覆盖之前的。

3. addEventListener（推荐）

const button = document.querySelector("button");

button.addEventListener("click", () => {
  console.log("Button clicked");
});

addEventListener 为何最佳

• 同一事件可以绑定多个处理函数
• 代码更整洁、更易扩展
• 符合现代 JavaScript 标准
• 与 React 等框架配合良好

最佳实践

在实际项目中，始终使用 addEventListener 来处理事件。