JavaScript之常用事件类型整理

JavaScript常用事件类型整理如下：

一、鼠标事件

基础交互事件
click：用户单击主鼠标按钮（左键）或聚焦时按下回车键触发；dblclick：双击主鼠标按钮触发，频率由系统配置决定。
按键状态事件
mousedown：按下任意鼠标键时触发；mouseup：释放任意鼠标键时触发。
移动与悬停事件
mousemove：鼠标在元素上移动时持续触发；mouseover/mouseout：鼠标进入/离开元素时触发（会冒泡，且移动到子元素时父元素视为离开）；mouseenter/mouseleave：类似mouseover/out，但不冒泡，且移动到子元素时父元素仍视为未离开。
事件对象属性
MouseEvent对象包含按键状态（altKey/ctrlKey/shiftKey）、按键类型（button：0左键/1中键/2右键）、坐标位置（pageX/Y：页面坐标；clientX/Y：视口坐标；offsetX/Y：事件源内边距坐标；screenX/Y：屏幕坐标；movementX/Y：仅mousemove中有效，表示相对上一次位置的偏移）。

二、键盘事件

按键状态事件
keydown：按下任意键时触发（按住不放会重复触发）；keyup：释放任意键时触发。
字符输入事件
keypress：按下字符键时触发（已废弃，推荐使用keydown/keyup）。
事件对象属性
KeyboardEvent对象包含按键标识（code：适配键盘布局的字符串；key：不适配布局的打印字符；keyCode/which：已废弃的键盘编码）。

三、表单事件

焦点事件
focus：元素获得焦点时触发（不冒泡）；blur：元素失去焦点时触发（不冒泡）。
表单操作事件
submit：表单提交时触发（仅form元素有效）；change：文本内容改变且失去焦点时触发（如select、input类型变化）；input：文本内容即时改变时触发（如输入框实时输入）。

四、窗口与全局事件

加载事件
load：页面所有资源（如图片）加载完成时触发；DOMContentLoaded：DOM树构建完成时触发（无需等待图片等资源）；readystatechange：页面状态变化时触发（状态分为loading、interactive、complete，interactive触发DOMContentLoaded，complete触发load）。
页面生命周期事件
beforeunload：窗口关闭前触发（可阻止关闭）；unload：窗口关闭时触发；scroll：窗口滚动时触发（通过scrollTop/scrollLeft获取滚动距离）；resize：窗口尺寸变化时触发（监听视口尺寸）。

五、其他事件

上下文菜单事件
contextmenu：右键菜单显示前触发。
剪贴板事件
copy/cut/paste：复制、剪切、粘贴时触发。
事件模拟
通过click()模拟点击、submit()模拟表单提交，或使用dispatchEvent()自定义事件。
定位相关方法
offsetParent：获取元素的第一个定位祖先元素（无则返回body）；getBoundingClientRect()：返回元素相对于视口的坐标和尺寸对象。

热门标签