掌握DOM事件全解析：键盘、表单、剪贴板到拖拽-CSDN博客

本文详细解读DOM事件，涵盖键盘操作（keydown, keyup, keypress）、表单输入与交互（input, focus, blur等）、剪贴板操作、拖拽事件，以及多媒体、框架、打印等各类事件，助您理解并应用在前端开发中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

键盘鼠标事件

DOM的键盘事件
onkeydown 键盘上的某个按键被按下时触发
onkeyup 键盘上的某个按键被松开时触发
onkeypress 键盘上的某个按键被按下并松开时触发不识别(上下左右 alt ctrl shift backface)

DOM的表单事件
输入事件
oninput 元素获取用户输入时触发
焦点事件
onfocus 元素获取到焦点时触发
onblur 元素失去焦点时触发
onsubmit 表单提交时触发
onchange 该事件在表单元素的内容改变时触发(<input>,<textarea>,<select>,<keygen>)
onselect 用户选择文本时触发(<input>,<textarea>)
onsearch 用户向搜索域输入文本时触发(<input type="search">) 按下回车或点击×时

DOM的剪贴板事件
oncopy 当用户拷贝元素内容时触发
oncut 当用户剪切元素的内容时触发
onpaste 当用户粘贴内容到元素时触发
onselectstart 当用户选中元素内容时触发

DOM的拖拽事件
ondrag 当元素正在拖拽时触发
ondragstart 当元素开始拖拽时触发
ondragend 当元素结束拖拽时触发

DOM的打印事件
onbeforeprint 在页面即将开始打印时触发

DOM的框架事件
onabort 图像的加载被中断。 ( <object>)
onbeforeunload 该事件在即将离开页面（刷新或关闭）时触发 onerror 在加载文档或图像时发生错误。 ( <object>, <body>和 <frameset>)
onhashchange 该事件在当前 URL 的锚部分发生修改时触发。 URL(统一资源定位符)
onload 一张页面或一幅图像完成加载。

onunload 用户退出页面。 ( <body> 和 <frameset>)
onready 当文档准备结束时触发
onpageshow 该事件在用户访问页面时触发
onpagehide 该事件在用户离开当前网页跳转到另外一个页面时触发
onresize 窗口或框架被重新调整大小。
onscroll 当文档被滚动时发生的事件。
ononline 该事件在浏览器开始在线工作时触发。
onoffline 该事件在浏览器开始离线工作时触发

DOM的媒体事件
onabort 事件在视频/音频（audio/video）终止加载时触发。
oncanplay 事件在用户可以开始播放视频/音频（audio/video）时触发。
oncanplaythrough 事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发。
ondurationchange 事件在视频/音频（audio/video）的时长发生变化时触发。
onemptied 当期播放列表为空时触发
onended 事件在视频/音频（audio/video）播放结束时触发。

onerror 事件在视频/音频（audio/video）数据加载期间发生错误时触发。
onloadeddata 事件在浏览器加载视频/音频（audio/video）当前帧时触发触发。
onloadedmetadata 事件在指定视频/音频（audio/video）的元数据加载后触发。
onloadstart 事件在浏览器开始寻找指定视频/音频（audio/video）触发。
onpause 事件在视频/音频（audio/video）暂停时触发。

onplay：事件在视频/音频（audio/video）开始播放时触发.

onplaying：事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。
onprogress：事件在浏览器下载指定的视频/音频（audio/video）时触发。
onratechange：事件在视频/音频（audio/video）的播放速度发送改变时触发
onseeked：事件在用户重新定位视频/音频（audio/video）的播放位置后触发
onseeking：事件在用户开始重新定位视频/音频（audio/video）时触发。
onstalled：事件在浏览器获取媒体数据，但媒体数据不可用时触发。
onsuspend：事件在浏览器读取媒体数据中止时触发。
ontimeupdate：事件在当前的播放位置发送改变时触发。
onvolumechange：事件在音量发生改变时触发。
onwaiting：事件在视频由于要播放下一帧而需要缓冲时触发。

DOM的事件对象（键盘）
altKey 返回当事件被触发时,"ALT"是否被按下。
ctrlKey 返回当事件被触发时,"CTRL"是否被按下。
shiftKey 返回当事件被触发时,"SHIFT"是否被按下。
metaKey 返回当事件被触发时,"MATE"是否被按下（Mac系统）。
code 返回键盘的编码
key 返回按键的标识符
keyCode 返回按键的字符代码针对IE8以下的浏览器
which 返回按键的字符代码
target 返回事件作用的目标元素
bubbles 是否具有冒泡属性
cancelBubble 是否取消冒泡
type 返回事件类型

鼠标事件中不同坐标的区别
clientX,clientY: 返回鼠标指针的坐标(可视区域)
pageX,pageY:返回鼠标指针的坐标(整个网页)
screenX,screenY:返回鼠标指针的坐标(整个屏幕区域)
offsetX,offsetY:返回鼠标指针的坐标(触发事件的元素)