HTML DOM Events

发送DOM事件是为了将发生的有趣事情通知代码。

事件通常与功能结合使用，并且在事件发生之前（例如，用户单击按钮时）不会执行该功能。

事件可以表示一切，从基本的用户交互到呈现模型中发生的事情的自动通知。

活动名称	描述	事件类型
abort	当资源加载已中止时发生该事件	UiEvent, Event
afterprint	当相关文档已开始打印或打印预览已关闭时，发生此事件	Event
animationend	CSS动画完成时发生	AnimationEvent
animationiteration	重复CSS动画时发生此事件	AnimationEvent
animationstart	CSS动画开始时发生此事件	AnimationEvent
beforeprint	当相关文档将要打印或预览以进行打印时，将发生此事件	Event
beforeunload	当窗口，文档及其资源即将被卸载时发生该事件	UiEvent, Event
blur	当元素失去焦点（不会冒泡）时发生该事件	FocusEvent
canplay	当浏览器可以开始播放媒体时（当它有足够的缓冲来开始播放时），将发生此事件。	Event
canplaythrough	当浏览器可以在不停止缓冲的情况下播放媒体时发生此事件	Event
change	当表单元素，选择或选中状态的内容更改时（对于<input>，<select>和<textarea>），将发生此事件。	Event
click	当用户单击元素时发生事件	MouseEvent
contextmenu	当用户右键单击某个元素以打开上下文菜单时，将发生该事件	MouseEvent
copy	当用户复制元素的内容时发生该事件	ClipboardEvent
cut	当用户剪切元素的内容时发生该事件	ClipboardEvent
dblclick	当用户双击元素时发生事件	MouseEvent
drag	拖动元素时发生事件	DragEvent
dragend	当用户完成拖动元素时，发生该事件	DragEvent
dragenter	当拖动的元素进入放置目标时，将发生事件	DragEvent
dragleave	当拖动的元素离开放置目标时发生事件	DragEvent
dragover	当拖动的元素在放置目标上方时发生事件	DragEvent
dragstart	当用户开始拖动元素时发生该事件	DragEvent
drop	当将拖动的元素放置在放置目标上时，发生事件	DragEvent
durationchange	更改媒体的持续时间时发生此事件	Event
ended	该事件在媒体播放到尽头时发生（对于“感谢收听”之类的消息很有用）	Event
error	资源加载失败时发生	ProgressEvent, UiEvent, Event
focus	当元素已获得焦点时发生事件（不会冒泡）	FocusEvent
focusin	该事件在某个元素即将获得焦点时发生	FocusEvent
focusout	该事件在某个元素即将失去焦点时发生	FocusEvent
fullscreenchange	以全屏模式显示元素时发生事件	Event
fullscreenerror	当元素无法以全屏模式显示时，发生此事件	Event
hashchange	当URL的锚点部分发生更改时，将发生此事件	HashChangeEvent
input	当元素获得用户输入时发生事件	InputEvent, Event
invalid	当元素无效时发生	Event
keydown	该事件在用户按下某个键时发生	KeyboardEvent
keypress	当用户按下键时发生事件	KeyboardEvent
keyup	当用户释放键时发生该事件	KeyboardEvent
load	该事件在对象已加载时发生	UiEvent, Event
loadeddata	加载媒体数据时发生事件	Event
loadedmetadata	加载元数据（如维度和持续时间）时发生此事件	Event
loadstart	当浏览器开始查找指定的媒体时发生该事件	ProgressEvent
message	通过事件源接收到消息时发生事件	Event
mousedown	当用户在元素上按下鼠标按钮时，发生事件	MouseEvent
mouseenter	当指针移动到元素上时，发生该事件	MouseEvent
mouseleave	当指针从元素中移出时发生该事件	MouseEvent
mousemove	当指针在元素上方移动时发生该事件	MouseEvent
mouseover	当指针移动到元素或其子元素之一上时，发生此事件	MouseEvent
mouseout	当用户将鼠标指针移出某个元素或其子元素之一时，将发生此事件	MouseEvent
mouseup	当用户在元素上释放鼠标按钮时发生该事件	MouseEvent
mousewheel	不推荐使用。改用wheel事件	WheelEvent
offline	当浏览器开始脱机工作时发生该事件	Event
online	当浏览器开始在线工作时发生该事件	Event
open	打开与事件源的连接时，将发生该事件	Event
pagehide	当用户离开网页导航时发生该事件	PageTransitionEvent
页面显示	当用户导航到网页时发生事件	PageTransitionEvent
paste	当用户将某些内容粘贴到元素中时，发生该事件	ClipboardEvent
pause	当用户或以编程方式暂停媒体时，将发生该事件	Event
play	当媒体已启动或不再暂停时发生该事件	Event
playing	在暂停或停止缓冲媒体后播放媒体时发生该事件	Event
popstate	窗口的历史记录更改时发生该事件	PopStateEvent
progress	当浏览器正在获取媒体数据（下载媒体）的过程中发生该事件	Event
ratechange	更改媒体的播放速度时发生	Event
resize	调整文档视图大小时发生此事件	UiEvent, Event
reset	该事件在重置表单时发生	Event
scroll	滚动元素的滚动条时发生事件	UiEvent, Event
search	当用户在搜索字段中输入内容时（对于<input="search">），将发生此事件。	Event
seeked	当用户完成移动/跳至媒体中的新位置时发生该事件	Event
seeking	当用户开始移动/跳到媒体中的新位置时发生该事件	Event
select	用户选择某些文本（对于<input>和<textarea>）后，将发生此事件。	UiEvent, Event
show	当<menu>元素显示为上下文菜单时，事件发生	Event
stalled	当浏览器尝试获取媒体数据但数据不可用时，发生该事件	Event
storage	更新Web存储区域时发生该事件	StorageEvent
submit	该事件在提交表单时发生	Event
suspend	当浏览器有意不获取媒体数据时发生此事件	Event
timeupdate	当播放位置更改时（例如，当用户快速前进到媒体中的另一个点时）发生该事件	Event
toggle	该事件在用户打开或关闭<details>元素时发生	Event
touchcancel	该事件在触摸被中断时发生	TouchEvent
touchend	当手指从触摸屏上移开时发生该事件	TouchEvent
touchmove	当手指在屏幕上拖动时发生事件	TouchEvent
touchstart	当手指放在触摸屏上时发生事件	TouchEvent
transitionend	CSS转换完成时发生此事件	TransitionEvent
unload	该事件在文档或从属资源被卸载时发生	UiEvent, Event
volumechange	当媒体的音量已更改（包括将音量设置为“静音”）时发生该事件	Event
waiting	当媒体已暂停但预期会恢复时（如媒体暂停以缓冲更多数据时），将发生此事件	Event
wheel	当鼠标滚轮在元素上向上或向下滚动时，会发生此事件	WheelEvent

HTML DOM事件属性

下表列出了DOM事件的属性：

属性	描述	事件类型
altKey	返回在触发鼠标事件时是否按下了“ ALT”键	MouseEvent
altKey	返回触发键事件时是否按下了“ ALT”键	KeyboardEvent, TouchEvent
animationName	返回动画的名称	AnimationEvent
bubbles	返回特定事件是否为冒泡事件	Event
button	返回触发鼠标事件时按下的鼠标按钮	MouseEvent
buttons	返回触发鼠标事件时按下的鼠标按钮	MouseEvent
cancelable	返回事件是否可以阻止其默认操作	Event
charCode	返回触发onkeypress事件的键的Unicode字符代码	KeyboardEvent
changeTouches	返回状态在上一次触摸和此触摸之间改变的所有触摸对象的列表	TouchEvent
clientX	返回触发鼠标事件时鼠标指针相对于当前窗口的水平坐标	MouseEvent, TouchEvent
clientY	返回触发鼠标事件时鼠标指针相对于当前窗口的垂直坐标	MouseEvent, TouchEvent
clipboardData	返回一个对象，其中包含受剪贴板操作影响的数据	ClipboardData
code	返回触发事件的键的代码	KeyboardEvent
composed	返回事件是否组成	Event
ctrlKey	返回触发鼠标事件时是否按下了“ CTRL”键	MouseEvent
ctrlKey	返回触发键事件时是否按下了“ CTRL”键	KeyboardEvent, TouchEvent
currentTarget	返回其事件侦听器触发事件的元素	Event
data	返回插入的字符	InputEvent
dataTransfer	返回一个对象，其中包含要拖放/插入或删除的数据	DragEvent, InputEvent
defaultPrevented	返回是否为事件调用preventDefault()方法	Event
deltaX	返回鼠标滚轮的水平滚动量（x轴）	WheelEvent
deltaY	返回鼠标滚轮的垂直滚动量（y轴）	WheelEvent
deltaZ	返回Z轴的鼠标滚轮的滚动量	WheelEvent
deltaMode	返回一个数字，表示增量值（像素，线条或页面）的度量单位	WheelEvent
detail	返回一个数字，该数字指示鼠标被单击了多少次	UiEvent
elapsedTime	返回动画已运行的秒数	AnimationEvent
elapsedTime	返回过渡已运行的秒数
eventPhase	返回当前正在评估事件流的哪个阶段	Event
inputType	返回更改的类型（即“插入”或“删除”）	InputEvent
isComposing	返回事件的状态是否正在组成	InputEvent, KeyboardEvent
isTrusted	返回事件是否受信任	Event
key	返回事件表示的键的键值	KeyboardEvent
key	返回更改的存储项目的密钥	StorageEvent
keyCode	返回触发onkeypress事件的键的Unicode字符代码，或触发onkeydown或onkeyup事件的键的Unicode键代码。	KeyboardEvent
location	返回键盘或设备上按键的位置	KeyboardEvent
lengthComputable	返回进度的长度是否可以计算	ProgressEvent
loaded	返回已加载的工作量	ProgressEvent
metaKey	返回事件触发时是否按下了“ META”键	MouseEvent
metaKey	返回在触发键事件时是否按下了“元”键	KeyboardEvent, TouchEvent
MovementX	返回相对于上一个mousemove事件的位置的鼠标指针的水平坐标	MouseEvent
MovementY	返回相对于上一个mousemove事件的位置的鼠标指针的垂直坐标	MouseEvent
newValue	返回更改后的存储项目的新值	StorageEvent
newURL	更改哈希值后，返回文档的URL	HasChangeEvent
offsetX	返回鼠标指针相对于目标元素边缘位置的水平坐标	MouseEvent
offsetY	返回鼠标指针相对于目标元素边缘位置的垂直坐标	MouseEvent
oldValue	返回已更改存储项目的旧值	StorageEvent
oldURL	返回哈希更改之前的文档的URL	HasChangeEvent
onemptied	当发生不良情况并且媒体文件突然不可用（例如意外断开连接）时，将发生此事件
pageX	返回触发鼠标事件时鼠标指针相对于文档的水平坐标	MouseEvent
pageY	返回触发鼠标事件时鼠标指针相对于文档的垂直坐标	MouseEvent
persisted	返回网页是否被浏览器缓存	PageTransitionEvent
propertyName	返回与动画或过渡相关联的CSS属性的名称	AnimationEvent, TransitionEvent
pseudoElement	返回动画或过渡的伪元素的名称	AnimationEvent, TransitionEvent
region		MouseEvent
relatedTarget	Returns the element related to the element that triggered the mouse event	MouseEvent
relatedTarget	返回与触发事件的元素相关的元素	FocusEvent
repeat	返回是否重复按住某个键	KeyboardEvent
screenX	返回触发事件时鼠标指针相对于屏幕的水平坐标	MouseEvent
screenY	返回触发事件时鼠标指针相对于屏幕的垂直坐标	MouseEvent
shiftKey	返回事件触发时是否按下了“ SHIFT”键	MouseEvent
shiftKey	返回触发键事件时是否按下了“ SHIFT”键	KeyboardEvent, TouchEvent
state	返回一个包含历史记录条目副本的对象	PopStateEvent
storageArea	返回一个表示受影响的存储对象的对象	StorageEvent
target	返回触发事件的元素	Event
targetTouches	返回所有与该表面接触以及touchstart事件发生在与当前目标元素相同的目标元素上的触摸对象的列表	TouchEvent
timeStamp	返回创建事件的时间（相对于纪元的毫秒数）	Event
total	返回将要加载的工作总量	ProgressEvent
touches	返回当前与曲面接触的所有触摸对象的列表	TouchEvent
transitionend	CSS转换完成时发生此事件	TransitionEvent
type	返回事件的名称	Event
url	返回更改项目文档的URL	StorageEvent
which	返回触发鼠标事件时按下的鼠标按钮	MouseEvent
which	返回触发onkeypress事件的键的Unicode字符代码，或触发onkeydown或onkeyup事件的键的Unicode键代码。	KeyboardEvent
view	返回对发生事件的Window对象的引用	UiEvent

HTML DOM事件方法

下表列出了DOM事件的方法：

方法	描述	事件类型
createEvent()	创建一个新事件	Event
getTargetRanges()	返回一个包含目标范围的数组，该范围将受到插入/删除的影响	InputEvent
getModifierState()	返回一个包含目标范围的数组，该范围将受到插入/删除的影响	MouseEvent
preventDefault()	阻止浏览器执行所选元素的默认操作	Event
stopImmediatePropagation()	防止同一事件的其他侦听器被调用	Event
stopPropagation()	防止事件在事件流中进一步传播	Event

相关参考

Javascript教程：Javascript事件

Javascript教程：事件监听器

Javascript教程：事件传播