小码哥的IT人生

HTML DOM 事件

JavaScript基础 2022-05-13 16:48:47小码哥的IT人生shichen

HTML DOM 事件

HTML DOM 事件

HTML DOM 事件允许 JavaScript 在 HTML 文档中的元素上注册不同的事件处理程序。

事件通常与函数结合使用,在事件发生之前函数不会被执行(例如当用户单击按钮时)。

如需有关事件的教程,请学习我们的 JavaScript 事件教程

事件 描述 属于
abort 媒体加载中止时发生该事件。
  1. UiEvent
  2. Event
afterprint 当页面开始打印时,或者关闭打印对话框时,发生此事件。 Event
animationend CSS 动画完成时发生此事件。 AnimationEvent
animationiteration 重复 CSS 动画时发生此事件。 AnimationEvent
animationstart CSS 动画开始时发生此事件。 AnimationEvent
beforeprint 即将打印页面时发生此事件。 Event
beforeunload 在文档即将被卸载之前发生此事件。
  1. UiEvent
  2. Event
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 当加载外部文件时发生错误后,发生此事件。
  1. ProgressEvent
  2. UiEvent
  3. Event
focus 在元素获得焦点时发生此事件。 FocusEvent
focusin 在元素即将获得焦点时发生此事件。 FocusEvent
focusout 在元素即将失去焦点时发生此事件。 FocusEvent
fullscreenchange 当元素以全屏模式显示时,发生此事件。 Event
fullscreenerror 当元素无法在全屏模式下显示时,发生此事件。 Event
hashchange 当 URL 的锚部分发生改变时,发生此事件。 HashChangeEvent
input 当元素获得用户输入时,发生此事件。
  1. InputEvent
  2. Event
invalid 当元素无效时,发生此事件。 Event
keydown 当用户正在按下键时,发生此事件。 KeyboardEvent
keypress 当用户按下键时,发生此事件。 KeyboardEvent
keyup 当用户松开键时,发生此事件。 KeyboardEvent
load 在对象已加载时,发生此事件。
  1. UiEvent
  2. Event
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 调整文档视图的大小时发生此事件。
  1. UiEvent
  2. Event
scroll 滚动元素的滚动条时发生此事件。
  1. UiEvent
  2. Event
search 当用户在搜索字段中输入内容时,发生此事件。 Event
seeked 当用户完成移动/跳到媒体中的新位置时,发生该事件。 Event
seeking 当用户开始移动/跳到媒体中的新位置时,发生该事件。 Event
select 用户选择文本后(对于<input>和<textarea>)发生此事件
  1. UiEvent
  2. 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 页面卸载后(对于 <body>),发生此事件。
  1. UiEvent
  2. Event
volumechange 当媒体的音量已更改时,发生此事件。 Event
waiting 当媒体已暂停但预期会恢复时,发生此事件。 Event
wheel 当鼠标滚轮在元素向上或向下滚动时,发生此事件。 WheelEvent

HTML DOM 事件属性和方法

属性/方法 描述 属于
altKey 返回触发鼠标事件时是否按下了 "ALT" 键。 MouseEvent
altKey 返回触发按键事件时是否按下了 "ALT" 键。
  1. KeyboardEvent
  2. TouchEvent
animationName 返回动画的名称。 AnimationEvent
bubbles 返回特定事件是否为冒泡事件。 Event
button 返回触发鼠标事件时按下的鼠标按钮。 MouseEvent
buttons 返回触发鼠标事件时按下的鼠标按钮。 MouseEvent
cancelBubble 设置或返回事件是否应该向上层级进行传播。
cancelable 返回事件是否可以阻止其默认操作。 Event
changeTouches 返回在上一触摸与该触摸之间其状态已更改的所有触摸对象的列表 TouchEvent
charCode 返回触发 onkeypress 事件的键的 Unicode 字符代码。 KeyboardEvent
clientX 返回触发鼠标事件时,鼠标指针相对于当前窗口的水平坐标。
  1. MouseEvent
  2. TouchEvent
clientY 返回触发鼠标事件时,鼠标指针相对于当前窗口的垂直坐标。
  1. MouseEvent
  2. TouchEvent
clipboardData 返回对象,其中包含受剪贴板操作影响的数据。 ClipboardData
code 返回触发事件的键的代码。 KeyboardEvent
composed 指示该事件是否可以从 Shadow DOM 传递到一般的 DOM。 Event
composedPath() 返回事件的路径。
createEvent() 创建新事件。 Event
ctrlKey 返回触发鼠标事件时是否按下了 "CTRL" 键。 MouseEvent
ctrlKey 返回按键鼠标事件时是否按下了 "CTRL" 键。
  1. KeyboardEvent
  2. TouchEvent
currentTarget 返回其事件侦听器触发事件的元素。 Event
data 返回插入的字符。 InputEvent
dataTransfer 返回一个对象,其中包含被拖放或插入/删除的数据。
  1. DragEvent
  2. InputEvent
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 返回事件的状态是否正在构成。
  1. InputEvent
  2. KeyboardEvent
isTrusted 返回事件是否受信任。 Event
key 返回事件表示的键的键值。 KeyboardEvent
key 返回更改后的存储项的键。 StorageEvent
keyCode 返回触发 onkeypress、onkeydown 或 onkeyup 事件的键的 Unicode 字符代码。 KeyboardEvent
location 返回键盘或设备上按键的位置。 KeyboardEvent
lengthComputable 返回进度的长度是否可计算。 ProgressEvent
loaded 返回已加载的工作量。 ProgressEvent
metaKey 返回事件触发时是否按下了 "META" 键。 MouseEvent
metaKey 返回按键事件触发时是否按下了 "META" 键。
  1. KeyboardEvent
  2. TouchEvent
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 属性的名称。
  1. AnimationEvent
  2. TransitionEvent
pseudoElement 返回动画或过渡的伪元素的名称。
  1. AnimationEvent
  2. TransitionEvent
region   MouseEvent
relatedTarget 返回与触发鼠标事件的元素相关的元素。 MouseEvent
relatedTarget 返回与触发事件的元素相关的元素。 FocusEvent
repeat 返回是否重复按住某个键。 KeyboardEvent
screenX 返回窗口/鼠标指针相对于屏幕的水平坐标。 MouseEvent
screenY 返回窗口/鼠标指针相对于屏幕的垂直坐标。 MouseEvent
shiftKey 返回事件触发时是否按下了 "SHIFT" 键。 MouseEvent
shiftKey 返回按键事件触发时是否按下了 "SHIFT" 键。
  1. KeyboardEvent
  2. TouchEvent
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

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024