HTML DOM 事件
HTML DOM 事件允许 JavaScript 在 HTML 文档中的元素上注册不同的事件处理程序。
事件通常与函数结合使用,在事件发生之前函数不会被执行(例如当用户单击按钮时)。
如需有关事件的教程,请学习我们的 JavaScript 事件教程。
事件 | 描述 | 属于 |
---|---|---|
abort | 媒体加载中止时发生该事件。 | |
afterprint | 当页面开始打印时,或者关闭打印对话框时,发生此事件。 | Event |
animationend | CSS 动画完成时发生此事件。 | AnimationEvent |
animationiteration | 重复 CSS 动画时发生此事件。 | AnimationEvent |
animationstart | CSS 动画开始时发生此事件。 | AnimationEvent |
beforeprint | 即将打印页面时发生此事件。 | Event |
beforeunload | 在文档即将被卸载之前发生此事件。 | |
blur | 当元素失去焦点时发生此事件。 | FocusEvent |
canplay | 当浏览器可以开始播放媒体时,发生此事件。 | Event |
canplaythrough | 当浏览器可以在不停止缓冲的情况下播放媒体时发生此事件。 | Event |
change | 当form元素的内容、选择的内容或选中的状态发生改变时,发生此事件 | 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 | 当加载外部文件时发生错误后,发生此事件。 | |
focus | 在元素获得焦点时发生此事件。 | FocusEvent |
focusin | 在元素即将获得焦点时发生此事件。 | FocusEvent |
focusout | 在元素即将失去焦点时发生此事件。 | FocusEvent |
fullscreenchange | 当元素以全屏模式显示时,发生此事件。 | Event |
fullscreenerror | 当元素无法在全屏模式下显示时,发生此事件。 | Event |
hashchange | 当 URL 的锚部分发生改变时,发生此事件。 | HashChangeEvent |
input | 当元素获得用户输入时,发生此事件。 | |
invalid | 当元素无效时,发生此事件。 | Event |
keydown | 当用户正在按下键时,发生此事件。 | KeyboardEvent |
keypress | 当用户按下键时,发生此事件。 | KeyboardEvent |
keyup | 当用户松开键时,发生此事件。 | KeyboardEvent |
load | 在对象已加载时,发生此事件。 | |
loadeddata | 媒体数据加载后,发生此事件。 | Event |
loadedmetadata | 加载元数据(比如尺寸和持续时间)时,发生此事件。 | Event |
loadstart | 当浏览器开始查找指定的媒体时,发生此事件。 | ProgressEvent |
message | 在通过此事件源接收消息时,发生此事件。 | Event |
mousedown | 当用户在元素上按下鼠标按钮时,发生此事件。 | MouseEvent |
mouseenter | 当指针移动到元素上时,发生此事件。 | MouseEvent |
mouseleave | 当指针从元素上移出时,发生此事件。 | MouseEvent |
mousemove | 当指针在元素上方移动时,发生此事件。 | MouseEvent |
mouseout | 当用户将鼠标指针移出元素或其中的子元素时,发生此事件。 | MouseEvent |
mouseover | 当指针移动到元素或其中的子元素上时,发生此事件。 | MouseEvent |
mouseup | 当用户在元素上释放鼠标按钮时,发生此事件。 | MouseEvent |
mousewheel | 不推荐使用。请改用 wheel 事件。 | WheelEvent |
offline | 当浏览器开始脱机工作时,发生此事件。 | Event |
online | 当浏览器开始在线工作时,发生此事件。 | Event |
open | 当打开与事件源的连接时,发生此事件。 | Event |
pagehide | 当用户离开某张网页进行导航时,发生此事件。 | PageTransitionEvent |
pageshow | 在用户导航到某张网页时,发生此事件。 | PageTransitionEvent |
paste | 当用户将一些内容粘贴到元素中时,发生此事件。 | ClipboardEvent |
pause | 当媒体被用户暂停或以编程方式暂停时,发生此事件。 | Event |
play | 当媒体已启动或不再暂停时,发生此事件。 | Event |
playing | 在媒体被暂停或停止以缓冲后播放时,发生此事件。 | Event |
popstate | 窗口的历史记录改变时,发生此事件。 | PopStateEvent |
progress | 当浏览器正处于获得媒体数据的过程中时,发生此事件。 | Event |
ratechange | 媒体播放速度改变时发生此事件。 | Event |
reset | 重置表单时发生此事件。 | Event |
resize | 调整文档视图的大小时发生此事件。 | |
scroll | 滚动元素的滚动条时发生此事件。 | |
search | 当用户在搜索字段中输入内容时,发生此事件。 | Event |
seeked | 当用户完成移动/跳到媒体中的新位置时,发生该事件。 | Event |
seeking | 当用户开始移动/跳到媒体中的新位置时,发生该事件。 | Event |
select | 用户选择文本后(对于<input>和<textarea>)发生此事件 | |
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 | 页面卸载后(对于 <body>),发生此事件。 | |
volumechange | 当媒体的音量已更改时,发生此事件。 | Event |
waiting | 当媒体已暂停但预期会恢复时,发生此事件。 | Event |
wheel | 当鼠标滚轮在元素向上或向下滚动时,发生此事件。 | WheelEvent |
HTML DOM 事件属性和方法
属性/方法 | 描述 | 属于 |
---|---|---|
altKey | 返回触发鼠标事件时是否按下了 “ALT” 键。 | MouseEvent |
altKey | 返回触发按键事件时是否按下了 “ALT” 键。 | |
animationName | 返回动画的名称。 | AnimationEvent |
bubbles | 返回特定事件是否为冒泡事件。 | Event |
button | 返回触发鼠标事件时按下的鼠标按钮。 | MouseEvent |
buttons | 返回触发鼠标事件时按下的鼠标按钮。 | MouseEvent |
cancelBubble | 设置或返回事件是否应该向上层级进行传播。 | |
cancelable | 返回事件是否可以阻止其默认操作。 | Event |
changeTouches | 返回在上一触摸与该触摸之间其状态已更改的所有触摸对象的列表 | TouchEvent |
charCode | 返回触发 onkeypress 事件的键的 Unicode 字符代码。 | KeyboardEvent |
clientX | 返回触发鼠标事件时,鼠标指针相对于当前窗口的水平坐标。 | |
clientY | 返回触发鼠标事件时,鼠标指针相对于当前窗口的垂直坐标。 | |
clipboardData | 返回对象,其中包含受剪贴板操作影响的数据。 | ClipboardData |
code | 返回触发事件的键的代码。 | KeyboardEvent |
composed | 指示该事件是否可以从 Shadow DOM 传递到一般的 DOM。 | Event |
composedPath() | 返回事件的路径。 | |
createEvent() | 创建新事件。 | Event |
ctrlKey | 返回触发鼠标事件时是否按下了 “CTRL” 键。 | MouseEvent |
ctrlKey | 返回按键鼠标事件时是否按下了 “CTRL” 键。 | |
currentTarget | 返回其事件侦听器触发事件的元素。 | Event |
data | 返回插入的字符。 | InputEvent |
dataTransfer | 返回一个对象,其中包含被拖放或插入/删除的数据。 | |
defaultPrevented | 返回是否为事件调用 preventDefault() 方法。 | Event |
deltaX | 返回鼠标滚轮的水平滚动量(x 轴)。 | WheelEvent |
deltaY | 返回鼠标滚轮的垂直滚动量(y 轴)。 | WheelEvent |
deltaZ | 返回鼠标滚轮的 Z 轴滚动量。 | WheelEvent |
deltaMode | 返回数字,代表增量值(像素、线或页面)的度量单位。 | WheelEvent |
detail | 返回数字,指示鼠标被单击了多少次。 | UiEvent |
elapsedTime | 返回动画已运行的秒数。 | AnimationEvent |
elapsedTime | 返回过渡已运行的秒数。 | |
eventPhase | 返回当前正在评估事件流处于哪个阶段。 | Event |
getModifierState() | 返回包含目标范围的数组,此范围将受到插入/删除的影响。 | MouseEvent |
getTargetRanges() | 返回包含目标范围的数组,此范围将受到插入/删除的影响。 | InputEvent |
inputType | 返回更改的类型(即 “inserting” 或 “deleting”)。 | InputEvent |
isComposing | 返回事件的状态是否正在构成。 | |
isTrusted | 返回事件是否受信任。 | Event |
key | 返回事件表示的键的键值。 | KeyboardEvent |
key | 返回更改后的存储项的键。 | StorageEvent |
keyCode | 返回触发 onkeypress、onkeydown 或 onkeyup 事件的键的 Unicode 字符代码。 | KeyboardEvent |
location | 返回键盘或设备上按键的位置。 | KeyboardEvent |
lengthComputable | 返回进度的长度是否可计算。 | ProgressEvent |
loaded | 返回已加载的工作量。 | ProgressEvent |
metaKey | 返回事件触发时是否按下了 “META” 键。 | MouseEvent |
metaKey | 返回按键事件触发时是否按下了 “META” 键。 | |
MovementX | 返回相对于上一 mousemove 事件的位置的鼠标指针的水平坐标 | MouseEvent |
MovementY | 返回相对于上一 mousemove 事件的位置的鼠标指针的垂直坐标 | MouseEvent |
newURL | 返回更改 hash 后的文档 URL。 | HasChangeEvent |
newValue | 返回更改后的存储项目的新值。 | StorageEvent |
offsetX | 返回鼠标指针相对于目标元素边缘位置的水平坐标。 | MouseEvent |
offsetY | 返回鼠标指针相对于目标元素边缘位置的垂直坐标。 | MouseEvent |
oldURL | 返回更改 hash 前的文档 URL。 | HasChangeEvent |
oldValue | 返回更改后的存储项目的旧值。 | StorageEvent |
onemptied | 当发生不良情况且媒体文件突然不可用时,发生此事件。 | |
pageX | 返回触发鼠标事件时鼠标指针相对于文档的水平坐标。 | MouseEvent |
pageY | 返回触发鼠标事件时鼠标指针相对于文档的垂直坐标。 | MouseEvent |
persisted | 返回网页是否被浏览器缓存。 | PageTransitionEvent |
preventDefault() | 如果可以取消事件,则将其取消,不执行属于该事件的默认操作。 | Event |
propertyName | 返回与动画或过渡相关联的 CSS 属性的名称。 | |
pseudoElement | 返回动画或过渡的伪元素的名称。 | |
region | MouseEvent | |
relatedTarget | 返回与触发鼠标事件的元素相关的元素。 | MouseEvent |
relatedTarget | 返回与触发事件的元素相关的元素。 | FocusEvent |
repeat | 返回是否重复按住某个键。 | KeyboardEvent |
screenX | 返回窗口/鼠标指针相对于屏幕的水平坐标。 | MouseEvent |
screenY | 返回窗口/鼠标指针相对于屏幕的垂直坐标。 | MouseEvent |
shiftKey | 返回事件触发时是否按下了 “SHIFT” 键。 | MouseEvent |
shiftKey | 返回按键事件触发时是否按下了 “SHIFT” 键。 | |
state | 返回包含历史记录条目副本的对象。 | PopStateEvent |
stopImme…() | 防止同一事件的其他侦听器被调用。 | Event |
stopPropagation() | 防止事件在事件流中进一步传播。 | Event |
storageArea | 返回代表受影响的存储对象的对象。 | StorageEvent |
target | 返回触发事件的元素。 | Event |
targetTouches | 返回包含仍与触摸面接触的所有触摸点的Touch对象的TouchList列表 | TouchEvent |
timeStamp | 返回创建事件的时间(相对于纪元的毫秒数)。 | Event |
total | 返回将要加载的工作总量。 | ProgressEvent |
touches | 返回当前与表面接触的所有 touch 对象的列表。 | TouchEvent |
type | 返回事件名称。 | Event |
url | 返回已更改项目的所在文档的 URL。 | StorageEvent |
which | 返回触发鼠标事件时按下的鼠标按钮。 | MouseEvent |
which | 返回触发 onkeypress 事件的键的 Unicode 字符码,或触发 onkeydown 或 onkeyup 事件的键的 Unicode 键码 | KeyboardEvent |
view | 返回对发生事件的 Window 对象的引用。 | UiEvent |
THE END