JavaScript常用事件示例详解

鼠标事件

click 事件

触发条件

• 鼠标左键按下并释放在同一元素上

• 触摸设备上手指触摸并释放

• 键盘回车或空格键（在可聚焦元素上）

• 调用元素的 .click() 方法

当用户点击元素时触发：

document.getElementById("myButton").addEventListener("click", function() {
  alert("按钮被点击了！");
});

dblclick 事件

触发流程

双击完整事件流：
1. 第一次点击：
   mousedown → mouseup → click
2. 第二次点击（在时间窗口内）：
   mousedown → mouseup → click → dblclick

注意：双击会触发两次完整的单击流程

双击元素时触发：

document.getElementById("myBox").addEventListener("dblclick", function() {
  this.style.backgroundColor = "red";
});

mouseover/mouseout 事件

• mouseover: 鼠标指针进入元素或其子元素时触发
• mouseout:  鼠标指针离开元素或其子元素时触发

关键特性：
1. 支持事件冒泡
2. 涉及子元素时会频繁触发
3. 适合需要精细控制的悬停交互

鼠标移入/移出元素时触发：

document.getElementById("hoverArea").addEventListener("mouseover", function() {
  this.textContent = "鼠标进来了";
});
 
document.getElementById("hoverArea").addEventListener("mouseout", function() {
  this.textContent = "鼠标出去了";
});

键盘事件

keydown 事件

keydown: 按下任意键盘键时触发（包括功能键、组合键）
触发流程：
1. 物理按下键盘键
2. keydown 事件触发
3. 如果产生字符：keypress 事件（已废弃）
4. 释放按键：keyup 事件

重复触发：

如果按住不放，keydown 会以系统重复速率连续触发

（可通过操作系统设置调整重复延迟和速率）

按下键盘任意键时触发：

document.addEventListener("keydown", function(event) {
  console.log("按下的键码是: " + event.keyCode);
});

keyup 事件

释放键盘按键时触发：

document.getElementById("textInput").addEventListener("keyup", function(event) {
  console.log("输入的内容: " + this.value);
});

表单事件

submit 事件

submit 事件的发途径：
1. 用户点击 type="submit" 的按钮或 input
2. 用户点击 type="image" 的图片提交按钮
3. 在表单内按 Enter 键（单行输入时）
4. 调用 form.submit() 方法（不会触发 submit 事件！）
5. 调用 form.requestSubmit() 方法（会触发 submit 事件）

关键区别：

- form.submit() → 直接提交，不触发事件

- form.requestSubmit() → 模拟用户提交，触发事件

表单提交时触发：

document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault();
  alert("表单已阻止默认提交！");
});

change 事件

change 事件的触发时机取决于表单元素类型：

文本输入类（input type="text|email|password|search|tel|url"）：
1. 值发生变化
2. 元素失去焦点（blur）后触发

选择类（input type="checkbox|radio"）：
1. 选中状态改变时立即触发
2. 点击或切换时立即触发

下拉选择（select）：
1. 选择选项改变时立即触发
2. 无论是通过鼠标、键盘还是程序修改

文件选择（input type="file"）：
1. 用户选择文件后立即触发
2. 文件列表发生变化时触发

范围选择（input type="range"）：
1. 值改变并释放鼠标时触发
2. 拖动过程中不触发，释放时才触发

日期时间类（input type="date|time|datetime-local|month|week"）：
1. 选择新值后立即触发
2. 通常是确认选择后触发

关键特性：change 事件不一定实时触发，有延迟性

表单元素值改变时触发（如输入框、下拉框）：

document.getElementById("colorSelect").addEventListener("change", function() {
  console.log("选中的颜色: " + this.value);
});

focus/blur 事件

元素获得/失去焦点时触发：

document.getElementById("emailInput").addEventListener("focus", function() {
  this.placeholder = "";
});
 
document.getElementById("emailInput").addEventListener("blur", function() {
  this.placeholder = "请输入邮箱";
});

窗口事件

load 事件

页面或资源加载完成时触发：

window.addEventListener("load", function() {
  console.log("页面加载完毕");
});

resize 事件

窗口大小改变时触发：

window.addEventListener("resize", function() {
  console.log("窗口尺寸: " + window.innerWidth + "x" + window.innerHeight);
});

scroll 事件

滚动页面时触发：

window.addEventListener("scroll", function() {
  console.log("当前滚动位置: " + window.pageYOffset);
});

触摸事件（移动端）

touchstart 事件

手指触摸屏幕时触发：

document.getElementById("touchArea").addEventListener("touchstart", function() {
  this.style.backgroundColor = "blue";
});

touchend 事件

手指离开屏幕时触发：

document.getElementById("touchArea").addEventListener("touchend", function() {
  this.style.backgroundColor = "white";
});

自定义事件

通过 CustomEvent 创建和触发自定义事件：

const event = new CustomEvent("myEvent", {
  detail: { message: "这是自定义数据" }
});
 
document.addEventListener("myEvent", function(e) {
  console.log(e.detail.message); // 输出：这是自定义数据
});
 
// 触发事件
document.dispatchEvent(event);

事件是 JavaScript 实现交互的核心机制，它连接了用户操作、浏览器行为与脚本逻辑。本文将系统梳理事件分类、深入解析事件机制、补充高阶用法，并结合开发实践给出优化方案，帮助开发者编写更健壮、高效的交互代码。

一、 核心事件分类及详细说明

JavaScript 事件覆盖了用户交互、资源加载、状态变化等多个维度，按触发场景可分为以下大类，部分事件补充了适用场景与使用细节：

1. 鼠标事件

鼠标事件是桌面端交互的基础，需重点区分冒泡与非冒泡、元素自身与子元素触发的差异。

2. 键盘事件

键盘事件用于捕获键盘操作，需注意事件触发顺序与键值判断逻辑。

关键属性：

• key：返回按键的名称（如 Enter、a）
• code：返回按键的物理位置（如 KeyA、Enter）
• ctrlKey/shiftKey/altKey：判断是否同时按下修饰键

3. 表单事件

表单事件聚焦于表单元素的状态变化，是处理用户输入的核心

4. 窗口 / 文档事件

这类事件与浏览器窗口、文档加载状态强相关，是控制页面生命周期的关键。

5. 拖放事件

拖放事件实现元素的拖拽交互，需配合 draggable="true" 属性使用。

二、 事件机制深度解析

要掌握事件处理，必须理解事件流、事件对象、事件委托这三大核心概念。

1. 事件流的三个阶段

事件流描述了事件在 DOM 树中的传播路径，分为三个阶段，顺序不可逆：

1. 捕获阶段（Capture Phase）

   • 顺序：从 window 向下传播到目标元素的父元素
   • 触发时机：事件到达目标元素之前
   • 开启方式：addEventListener 第三个参数设为 true

2. 目标阶段（Target Phase）

   • 顺序：事件到达实际触发的元素
   • 触发时机：捕获阶段结束后，冒泡阶段开始前
   • 特点：此时 event.eventPhase === 2，事件处理顺序由绑定顺序决定

3. 冒泡阶段（Bubble Phase）

   • 顺序：从目标元素向上传播到 window
   • 触发时机：目标阶段结束后
   • 特点：addEventListener 默认在该阶段触发（第三个参数为 false）

关键方法：

• event.stopPropagation()：阻止事件继续传播（捕获 / 冒泡）
• event.stopImmediatePropagation()：阻止事件传播 + 阻止当前元素后续的监听器执行

2. 事件对象（Event）核心属性

事件对象是事件处理函数的唯一参数，包含了事件的所有关键信息，补充高频属性如下：

3. 事件委托（Event Delegation）

核心原理：利用事件冒泡机制，在父元素上绑定一个监听器，处理所有子元素的事件。适用场景：

• 动态添加的子元素（如列表新增项）
• 大量同类子元素（如表格单元格）

• 优势：

• 减少事件监听器数量，降低内存占用
• 无需为动态元素重复绑定事件
• 简化代码维护

二、 框架中的事件处理差异

在 React、Vue 等框架中，事件系统基于原生事件封装，存在以下差异：

1. React 合成事件
   • 所有事件绑定到 document 上，通过事件委托实现
   • 需使用 e.nativeEvent 获取原生事件对象
   • 组件卸载时自动移除监听器
2. Vue 事件
   • 支持原生事件和自定义事件（$emit/v-on）
   • 自定义事件不冒泡，需使用 .native 修饰符监听原生事件
3. Angular 事件
   • 使用 (event) 语法绑定，支持事件过滤
   • 内置 HostListener 装饰器监听宿主元素事件

三、 事件调试与监控技巧

1. 浏览器开发者工具
   • Elements → Event Listeners：查看元素绑定的所有监听器
   • Sources → Event Listener Breakpoints：按事件类型打断点
2. 性能监控
   • 使用 Performance 面板录制事件触发过程，分析耗时
   • 监控高频事件触发频率，避免过度渲染
3. 错误捕获
   • 使用 window.onerror 捕获事件处理函数中的运行时错误
   • 使用 window.addEventListener('unhandledrejection') 捕获 Promise 错误

总结

JavaScript 事件是前端交互的基石，掌握事件分类、事件流机制和优化方案，是编写高性能、可维护代码的关键。开发中需结合业务场景，合理选择事件类型，善用事件委托和节流防抖，同时兼顾兼容性与无障碍访问，才能构建出优质的交互体验。

到此这篇关于JavaScript常用事件的文章就介绍到这了,更多相关js常用事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论