HTML DOM 事件 html dom方法

zhezhongyun 2024-12-20 19:45 58 浏览

美女养养眼。

HTML DOM 事件允许 JavaScript 在 HTML 文档中的元素上注册不同的事件处理程序。事件通常与函数结合使用，在事件发生之前函数不会被执行（例如当用户单击按钮时）。后面我们详细介绍JavaScript HTML DOM 事件的用法。今天我们先介绍下HTML DOM事件相关的，我们先看看，事件对象、Event对象、其他事件对象几个概念

事件对象

当 HTML 中发生事件时，该事件属于某个事件对象，例如，按下键盘的某一个键事件属于KeyboardEvent对象，鼠标单击事件属于 MouseEvent 对象，鼠标滚轮滚动事件属于 WheelEvent对象等。

Event 对象

所有事件对象均基于 Event 对象，并继承其所有属性和方法。如查看事件类型我们可以用event.type方法来获取事件类型。

Event 对象	描述
Event	所有事件对象的父对象。

其他事件对象

以下是最常见的事件对象：

Event 对象	描述
AnimationEvent	针对 CSS 动画
ClipboardEvent	针对剪贴板的修改
DragEvent	针对拖放交互
FocusEvent	针对与焦点有关的事件
HashChangeEvent	针对 URL 锚点部分的更改
InputEvent	针对用户输入
KeyboardEvent	针对键盘交互
MouseEvent	针对鼠标交互
PageTransitionEvent	针对导航到网页或离开网页
PopStateEvent	针对历史记录条目中的更改
ProgressEvent	针对加载外部资源的进度
StorageEvent	针对窗口的存储区域中的更改
TouchEvent	针对触摸交互
TransitionEvent	针对 CSS 过渡
UiEvent	针对用户界面交互
WheelEvent	针对鼠标滚轮交互

下面这是一些常见事件及其事件类型归属

事件	描述	属于
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	当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	当加载外部文件时发生错误后，发生此事件。	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
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	调整文档视图的大小时发生此事件。	UiEvent Event
scroll	滚动元素的滚动条时发生此事件。	UiEvent Event
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	页面卸载后（对于 <body>），发生此事件。	UiEvent Event
volumechange	当媒体的音量已更改时，发生此事件。	Event
waiting	当媒体已暂停但预期会恢复时，发生此事件。	Event
wheel	当鼠标滚轮在元素向上或向下滚动时，发生此事件。	WheelEvent

上面的内容，我们先介绍到这，后面详细介绍他们的相关用法。

JavaScript 和 HTML DOM 参考手册

上一篇：JavaScript HTML DOM 事件之鼠标事件
下一篇：HTML DOM Columngroup 对象 html dom操作

HTML DOM 事件 html dom方法

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

接口测试遇到500报错?别慌，你的头部可能有点问题

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

关于HTML5被简称做H5，你怎么看?（html5缩写）

现在页面实时聊天都使用Websocket技术实现吗?