HTML DOM 事件
JavaScript基础 2022-05-13 16:48:47小码哥的IT人生shichen
HTML DOM 事件
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 |
