在这里插入图片描述

mouse相关，keyboard相关，表单事件,窗口事件（DomContentLoaded), paster事件，media事件，drapanddrop事件，animation and transition事件，touch事件
千万不能死记硬背呀，而是要理解。
事件（Event）：表示某个动作或状态变化，如点击、键盘输入、页面加载等。

事件流

在这里插入图片描述

我之前犯的错误就是我把捕获和监听混淆了。

capture阶段（addEventLister的第三个参数设置为true，可以捕获）
target阶段
bubbing阶段
在这里插入图片描述

event.stopPropagation() 组织继续传播

qwen3的回答

JavaScript 与浏览器事件是 Web 开发中的核心内容之一。理解事件机制和事件分类，有助于开发者实现用户交互、动态响应页面行为。以下是关于 JavaScript 与浏览器事件分类 的详细说明：

一、什么是浏览器事件？

浏览器事件 是指用户或浏览器在网页上执行某些操作时触发的“信号”。JavaScript 可以监听这些事件，并在事件发生时执行相应的代码（事件处理程序）。

例如：

  • 点击按钮
  • 鼠标移动
  • 键盘输入
  • 页面加载完成
  • 表单提交

二、事件处理方式

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

<button onclick="alert('点击了')">点击我</button>

2. DOM 元素属性绑定

const btn = document.getElementById('myBtn');
btn.onclick = function() {
    alert('按钮被点击');
};

3. 使用 addEventListener（推荐）

btn.addEventListener('click', function() {
    alert('按钮被点击');
});

优点：可绑定多个事件、解绑方便、结构清晰。

三、事件流（事件传播机制）

事件在 DOM 中的传播分为三个阶段：

  1. 捕获阶段（Capture Phase）：从 window → document → 目标元素的祖先，逐层向下
  2. 目标阶段（Target Phase）：到达目标元素
  3. 冒泡阶段（Bubbling Phase）：从目标元素逐层向上传播到 window
element.addEventListener('click', handler, useCapture);
// useCapture 为 true：在捕获阶段触发
// useCapture 为 false（默认）：在冒泡阶段触发

四、浏览器事件分类

浏览器事件种类繁多，主要分为以下几类：

1. 鼠标事件（Mouse Events）

事件触发时机
click点击（按下 + 释放）
dblclick双击
mousedown鼠标按键按下
mouseup鼠标按键释放
mousemove鼠标移动
mouseover鼠标进入元素（包括子元素）
mouseout鼠标离开元素（包括子元素）
mouseenter鼠标进入元素（不冒泡）
mouseleave鼠标离开元素（不冒泡）
contextmenu右键菜单触发前

mouseenter / mouseleave 不冒泡，适合用于悬停效果。

2. 键盘事件（Keyboard Events）

事件触发时机
keydown按下任意键（重复触发）
keyup释放按键
keypress输入字符（已废弃，建议用 keydown）
document.addEventListener('keydown', function(e) {
    if (e.key === 'Enter') {
        console.log('按下了回车');
    }
});

3. 表单事件（Form Events）

事件触发时机
submit表单提交（可阻止默认行为）
reset表单重置
input输入框内容改变（实时）
change元素值改变并失去焦点（如 select、input[type=text]）
focus元素获得焦点
blur元素失去焦点
focusin获得焦点（冒泡）
focusout失去焦点（冒泡）

4. 窗口事件（Window Events）

事件触发时机
load页面及资源（图片、CSS、JS）完全加载完成
DOMContentLoadedHTML 文档解析完成，无需等待资源
beforeunload页面即将卸载（可弹出确认框）
unload页面已卸载
resize浏览器窗口大小改变
scroll滚动页面或元素
window.addEventListener('resize', () => {
    console.log('窗口大小变了:', window.innerWidth);
});

5. 拖放事件（Drag and Drop）

事件触发元素说明
dragstart被拖动元素开始拖拽
drag被拖动元素拖拽中
dragend被拖动元素拖拽结束
dragenter目标区域拖入目标
dragover目标区域拖动在目标上方（需阻止默认行为允许放置）
dragleave目标区域拖出目标
drop目标区域放置完成
dropZone.addEventListener('dragover', e => e.preventDefault());
dropZone.addEventListener('drop', e => {
    e.preventDefault();
    console.log('文件已放置');
});

6. 剪贴板事件（Clipboard Events）

事件触发时机
copy执行复制操作
cut执行剪切操作
paste执行粘贴操作
input.addEventListener('paste', e => {
    const text = e.clipboardData.getData('text');
    console.log('粘贴内容:', text);
});

7. 媒体事件（Media Events）

用于 <audio> 和 <video> 元素：

事件说明
play开始播放
pause暂停
ended播放结束
volumechange音量变化
timeupdate播放时间更新
loadedmetadata媒体元数据加载完成

8. 自定义事件（Custom Events）

可以创建并触发自定义事件，用于组件通信：

const event = new CustomEvent('myEvent', {
    detail: { message: 'Hello' }
});
element.dispatchEvent(event);

element.addEventListener('myEvent', e => {
    console.log(e.detail.message);
});

五、事件对象（Event Object）

每个事件处理函数都会接收到一个 event 对象，包含事件相关信息：

element.addEventListener('click', function(e) {
    e.target        // 触发事件的元素
    e.currentTarget // 绑定事件的元素
    e.preventDefault() // 阻止默认行为
    e.stopPropagation() // 阻止冒泡
    e.stopImmediatePropagation() // 阻止其他监听器执行
    e.clientX / e.clientY // 鼠标坐标
    e.key / e.code // 键盘事件键值
});

六、事件委托（Event Delegation）

利用事件冒泡机制，将事件监听绑定到父元素，处理子元素的事件，尤其适用于动态内容。

document.getElementById('list').addEventListener('click', function(e) {
    if (e.target.tagName === 'LI') {
        console.log('点击了列表项:', e.target.textContent);
    }
});

七、常见事件使用场景

场景推荐事件
实时输入监听input
表单提交验证submit
按键控制keydown
响应式布局resize
图片加载完成load（img）
DOM 结构就绪DOMContentLoaded
拖拽上传dragover, drop

总结

分类主要事件举例
鼠标事件click, mousemove, mousedown
键盘事件keydown, keyup
表单事件input, change, submit
窗口事件load, resize, scroll
拖放事件dragstart, drop
剪贴板事件copy, paste
媒体事件play, ended
自定义事件CustomEvent

掌握这些事件分类和使用方式，是构建交互式 Web 应用的基础。

如需进一步学习，可查阅：

如有具体事件使用问题，欢迎继续提问！

==========

====================我是分割线 ==================

GML4.5的回答

JavaScript 与浏览器事件分类

JavaScript 事件基础

事件流

事件流描述的是从页面中接收事件的顺序，主要包括三种模型：

  • 事件冒泡：事件从最具体的元素开始，逐级向上传播到较不具体的节点
  • 事件捕获：事件从较不具体的节点开始，逐级向下传播到最具体的元素
  • DOM事件流：包括事件捕获阶段、目标阶段和事件冒泡阶段

事件处理程序绑定方式

  1. HTML事件处理程序：

    <button onclick="alert('Clicked!')">Click me</button>

  2. DOM0级事件处理程序：

    const btn = document.getElementById('myButton');
btn.onclick = function() {
  alert('Clicked!');
};

  3. DOM2级事件处理程序：

    const btn = document.getElementById('myButton');
btn.addEventListener('click', function() {
  alert('Clicked!');
}, false);

事件对象

事件触发时创建的对象，包含与事件相关的信息：

  • type：事件类型
  • target：事件目标
  • currentTarget：当前处理事件的元素
  • preventDefault()：取消事件的默认行为
  • stopPropagation()：阻止事件冒泡或捕获

浏览器事件分类

1. 用户界面事件（UI Events）

  • load：页面完全加载后触发
  • unload：页面完全卸载后触发
  • resize：窗口或框架大小改变时触发
  • scroll：用户滚动带滚动条的元素时触发
  • error：发生JavaScript错误或资源加载失败时触发

2. 焦点事件（Focus Events）

  • focus：元素获得焦点时触发（不冒泡）
  • blur：元素失去焦点时触发（不冒泡）
  • focusin：元素获得焦点时触发（冒泡）
  • focusout：元素失去焦点时触发（冒泡）

3. 鼠标事件（Mouse Events）

  • click：单击鼠标主键时触发
  • dblclick：双击鼠标主键时触发
  • mousedown：按下鼠标键时触发
  • mouseup：释放鼠标键时触发
  • mousemove：鼠标指针移动时触发
  • mouseenter：鼠标指针进入元素边界时触发（不冒泡）
  • mouseleave：鼠标指针离开元素边界时触发（不冒泡）
  • mouseover：鼠标指针进入元素边界时触发（冒泡）
  • mouseout：鼠标指针离开元素边界时触发（冒泡）
  • contextmenu：尝试打开上下文菜单时触发（通常是右键单击）

4. 键盘事件（Keyboard Events）

  • keydown：按下键盘上的任意键时触发
  • keyup：释放键盘上的键时触发
  • keypress：按下键盘上的字符键时触发（已废弃）

5. 触摸事件（Touch Events）

  • touchstart：手指触摸屏幕时触发
  • touchmove：手指在屏幕上滑动时触发
  • touchend：手指从屏幕上移开时触发
  • touchcancel：系统取消触摸时触发

6. 表单事件（Form Events）

  • submit：用户提交表单时触发
  • reset：用户重置表单时触发
  • change：表单控件的值改变时触发
  • input：表单控件的值改变时立即触发
  • invalid：表单控件验证失败时触发

7. 拖放事件（Drag and Drop Events）

  • dragstart：开始拖动元素时触发
  • drag：元素被拖动时持续触发
  • dragend：拖动操作结束时触发
  • dragenter：被拖动的元素进入有效放置目标时触发
  • dragover：元素被拖动到有效放置目标上时触发
  • dragleave：被拖动的元素离开有效放置目标时触发
  • drop：元素被放置到有效放置目标上时触发

8. 剪贴板事件（Clipboard Events）

  • cut：将内容剪切到剪贴板时触发
  • copy：将内容复制到剪贴板时触发
  • paste：从剪贴板粘贴内容时触发

9. 媒体事件（Media Events）

  • play：媒体开始播放时触发
  • pause：媒体暂停时触发
  • ended：媒体播放完毕时触发
  • timeupdate：媒体播放位置改变时触发
  • volumechange：媒体音量改变时触发

10. 进度事件（Progress Events）

  • loadstart：浏览器开始加载资源时触发
  • progress：浏览器正在加载资源时触发
  • load：资源加载完成时触发
  • error：资源加载出错时触发
  • abort：资源加载被中止时触发

11. 页面生命周期事件

  • DOMContentLoaded：DOM完全加载和解析完成时触发
  • beforeunload：窗口、文档或其资源即将卸载时触发
  • pageshow：用户导航到网页时触发
  • pagehide：用户导航离开网页时触发

12. 设备事件（Device Events）

  • deviceorientation：设备方向改变时触发
  • devicemotion：设备移动或旋转时触发
  • orientationchange：设备方向（横屏/竖屏）改变时触发

13. 网络事件（Network Events）

  • online：浏览器连接到网络时触发
  • offline：浏览器断开网络连接时触发

14. 存储事件（Storage Events）

  • storage：存储区域（localStorage或sessionStorage）发生变化时触发

15. 动画和过渡事件

  • animationstart：CSS动画开始时触发
  • animationend：CSS动画结束时触发
  • transitionend：CSS过渡结束时触发

16. 其他重要事件

  • hashchange：URL的片段标识符（#号后的部分）改变时触发
  • popstate：活动历史记录条目更改时触发
  • visibilitychange：文档可见性改变时触发

事件委托

事件委托是一种利用事件冒泡的技术，通过在父元素上设置事件监听器来管理多个子元素上的事件：

document.getElementById('parent-list').addEventListener('click', function(e) {
  if (e.target && e.target.tagName === 'LI') {
    console.log('List item', e.target.id, 'was clicked!');
  }
});

自定义事件

JavaScript允许创建和触发自定义事件：

// 创建自定义事件
const event = new CustomEvent('myEvent', {
  detail: { message: 'Hello, world!' }
});

// 监听自定义事件
document.addEventListener('myEvent', function(e) {
  console.log(e.detail.message);
});

// 触发自定义事件
document.dispatchEvent(event);

理解这些事件类型和机制对于构建交互丰富、响应迅速的Web应用至关重要。

# javascript
Logo
AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

cover

别让你的 Agent 一口吃成胖子：AI Agent 任务拆分的工程实践指南

avatar AI Agent技术社区
cover

AI Agent律师行业智能体的实践步骤

avatar AI Agent技术社区

MCP + 企业IM架构：AI Agent调用OA、ERP、MES时，身份和权限如何传递？

<think>我们只需要根据内容生成摘要，不超过150字。先理解文章核心：MCP+企业IM架构，AI Agent调用OA/ERP/MES时身份和权限传递。要点：IM从消息入口变任务入口；MCP解决连接，但不解决权限；需要五层身份映射；权限分层（可见性、调用、数据范围、确认）；建议组合MCP+API网关。摘要需简洁。 参考生成： "本文探讨MCP与企业IM集成中AI Agent调用业务系统时的身份权

avatar AI Agent技术社区