浏览器交互事件汇总

事件类别 事件名称 触发条件 适用设备
指针事件 / Pointer Events pointerdown 用户按下指针设备(如鼠标、触摸屏、触控笔) 所有设备
pointermove 指针设备在屏幕上移动 所有设备
pointerup 用户松开指针设备 所有设备
pointercancel 系统取消指针操作 所有设备
鼠标事件 / Mouse Events mousedown 用户按下鼠标按钮 桌面端
mousemove 鼠标在屏幕上移动 桌面端
mouseup 用户松开鼠标按钮 桌面端
click 单击鼠标按钮 桌面端
dblclick 双击鼠标按钮 桌面端
contextmenu 右键点击打开上下文菜单 桌面端
触摸事件 / Touch Events touchstart 用户触摸屏幕 手机、平板
touchmove 触摸点在屏幕上移动 手机、平板
touchend 用户手指从屏幕上移开 手机、平板
touchcancel 系统取消触摸操作(如来电时) 手机、平板
键盘事件 / Keyboard Events keydown 按下键盘按键 桌面端、部分移动端
keyup 松开键盘按键 桌面端、部分移动端
keypress 按下按键(不推荐) 桌面端
焦点事件 / Focus Events focus 元素获取焦点 所有设备
blur 元素失去焦点 所有设备
focusin / focusout 类似于 focus 和 blur,但可以冒泡 所有设备
输入事件 / Input Events input 输入框中内容改变(实时) 所有设备
change 输入框或选择框中值改变 所有设备
滚动事件 / Scroll Event scroll 页面或可滚动元素发生滚动 所有设备
拖放事件 / Drag and Drop Events dragstart 开始拖拽元素 桌面端
drag 拖拽元素过程中持续触发 桌面端
dragend 拖拽结束 桌面端
dragenter, dragover, dragleave 拖拽元素经过目标位置 桌面端
drop 拖拽元素放置到目标位置 桌面端
DOM变更事件 / Mutation Events MutationObserver 监听 DOM 结构或属性的变化 所有设备
设备传感事件 / Device Orientation and Motion Events deviceorientation 设备方向变化 移动端
devicemotion 设备加速度或旋转变化 移动端
全屏事件 / Fullscreen Events fullscreenchange 页面或元素进入或退出全屏 所有设备
fullscreenerror 请求全屏失败 所有设备
语音识别事件 / Speech Recognition Events SpeechRecognition 语音识别结果、错误 支持语音设备
虚拟键盘事件 / Virtual Keyboard Events keyboardopen / keyboardclose 虚拟键盘打开或关闭(非标准事件) 移动端
手势事件 / Gesture Events gesturestart, gesturechange, gestureend 多点触控手势(如放大、缩小) 手机、平板
相关推荐
Dragon Wu8 小时前
Electron Forge集成React Typescript完整步骤
前端·javascript·react.js·typescript·electron·reactjs
芳草萋萋鹦鹉洲哦8 小时前
【Tailwind】动画解读:Tailwind CSS Animation Examples
前端·css
华仔啊8 小时前
jQuery 4.0 发布,IE 终于被放弃了
前端·javascript
一心赚狗粮的宇叔8 小时前
03.Node.js依赖包补充说明及React&Node.Js项目
前端·react.js·node.js
子春一8 小时前
Flutter for OpenHarmony:音律尺 - 基于Flutter的Web友好型节拍器开发与节奏可视化实现
前端·flutter
JarvanMo8 小时前
150万开发者“被偷家”!这两款浓眉大眼的 VS Code 插件竟然是间谍
前端
亿元程序员8 小时前
大佬,现在AI游戏开发教程那么多,你不搞点卖给大学生吗?
前端
未来龙皇小蓝8 小时前
RBAC前端架构-02:集成Vue Router、Vuex和Axios实现基本认证实现
前端·vue.js·架构
晓得迷路了8 小时前
栗子前端技术周刊第 116 期 - 2025 JS 状态调查结果、Babel 7.29.0、Vue Router 5...
前端·javascript·vue.js
顾北129 小时前
AI对话应用接口开发全解析:同步接口+SSE流式+智能体+前端对接
前端·人工智能