浏览器交互事件汇总

事件类别 事件名称 触发条件 适用设备
指针事件 / 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 多点触控手势(如放大、缩小) 手机、平板
相关推荐
前端太佬2 分钟前
前端对接微信扫码登录:从踩坑到填坑的全记录
前端·javascript·微信
若愚679210 分钟前
Vue3 + OpenLayers 开发教程 ( 三 ) 交互与空间分析
arcgis·vue·交互
京东零售技术10 分钟前
Taro on Harmony :助力业务高效开发纯血鸿蒙应用
前端·开源
前端大白话26 分钟前
救命!这10个Vue3技巧藏太深了!性能翻倍+摸鱼神器全揭秘
前端·javascript·vue.js
嘻嘻嘻嘻嘻嘻ys28 分钟前
《Vue 3全栈架构实战:Vite工程化、Pinia状态管理与Nuxt 3深度解析》
前端·后端
前端大白话30 分钟前
前端人必看!10个JavaScript“救命”技巧,让你告别加班改Bug
前端·javascript·程序员
cg501740 分钟前
Vue回调函数中的this
前端·javascript·vue.js
前端太佬42 分钟前
从零到一实现扫码登录:一个前端菜鸟的踩坑实录
前端·javascript·架构
yuanmenglxb20041 小时前
微信小程序核心技术栈
前端·javascript·vue.js·笔记·微信小程序·小程序
爱编程的鱼1 小时前
如何让 HTML 文件嵌入另一个 HTML 文件:详解与实践
前端·html