HTML DOM 事件对象

2021-07-16 01:40:31

事件是可以被 JavaScript 侦测到的行为

JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为

HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序;事件通常与函数结合使用，函数不会在事件发生前被执行！(如用户点击按钮)

鼠标事件

属性	描述
onclick	鼠标单击时调用的事件句柄
oncontextmenu	点击鼠标右键打开上下文菜单时触发
ondblclick	鼠标双击时调用的事件句柄
onmousedown	鼠标按钮被按下
onmouseenter	当鼠标指针移动到元素上时触发
onmouseleave	当鼠标指针移出元素时触发
onmousemove	鼠标被移动
onmouseover	鼠标移到某元素之上
onmouseout	鼠标从某元素移开
onmouseup	鼠标按键被松开

oncontextmenu事件

所有浏览器都支持 oncontextmenu 事件，contextmenu 元素只有 Firefox 浏览器支持

语法：

<element oncontextmenu="myScript">     //HTML 中
object.oncontextmenu=function(){myScript};     //JavaScript 中
object.addEventListener("contextmenu", myScript);     //JavaScript 中使用addEventListener()方法

注意： Internet Explorer 8 及更早 IE 浏览器版本不支持 addEventListener()

键盘事件

属性	描述
onkeydown	某个键盘按键被按下
onkeypress	某个键盘按键被按下并松开
onkeyup	某个键盘按键被松开

框架/对象（Frame/Object）事件

属性	描述
onabort	图像的加载被中断时触发
onbeforeunload	该事件在即将离开页面（刷新或关闭）时触发
onerror	加载文档或图像中发生错误时触发
onhashchange	当前 URL 的锚部分发生修改时触发
onload	一张页面或一幅图像完成加载
onpageshow	用户访问页面时触发
onpagehide	用户离开当前网页跳转到另外一个页面时触发
onresize	窗口或框架被重新调整大小时触发
onscroll	当文档被滚动时触发
onunload	用户退出页面时触发

onbeforeunload 事件

onbeforeunload事件在即将离开当前页面（刷新或关闭）时触发，该事件可用于弹出对话框提示用户是继续浏览页面还是离开当前页面

对话框默认的提示信息根据不同的浏览器有所不同，标准的信息类似 "确定要离开此页吗？"。该信息不能删除。但你可以自定义一些消息提示与标准信息一起显示在对话框

注意：在 Firefox 浏览器中，只显示默认提醒信息（不显示自定义信息）

onhashchange 事件

onhashchange事件在当前URL的锚部分(以'#'号为开始) 发生改变时触发。

可以使用以下方式调用事件:

通过设置Location对象的location.hash或location.href属性修改锚部分

使用不同书签导航到当前页面（使用"后退"或"前进"按钮）

点击链接跳转到书签锚

onpageshow 事件

onpageshow事件在用户浏览网页时触发

onpageshow事件类似于onload事件，onload事件在页面第一次加载时触发，onpageshow事件在每次加载页面时触发，而onload事件在页面从浏览器缓存中读取时不触发

为了查看页面是直接从服务器上载入还是从缓存中读取，你可以使用 PageTransitionEvent 对象的 persisted 属性来判断。如果页面从浏览器的缓存中读取该属性返回 ture，否则返回 false

onpagehide 事件

onpagehide事件在用户离开网页时触发

离开网页有多种方式。如点击一个链接，刷新页面，提交表单，关闭浏览器等。onpagehide 事件有时可以替代onunload事件，但onunload事件触发后无法缓存页面。

同样可以使用 PageTransitionEvent 对象的 persisted 属性来判断页面是否从浏览器的缓存中读取的该属性

表单事件

属性	描述
onblur	元素失去焦点时触发
onchange	表单元素的内容改变时触发(`<input><keygen><select><textarea`>)
onfocus	元素获取焦点时触发
onfocusin	元素即将获取焦点时触发
onfocusout	元素即将失去焦点时触发
oninput	元素获取用户输入时触发
onreset	表单重置时触发
onsearch	用户向搜索域输入文本时触发 (`<input="search">`)
onselect	用户选取文本时触发 ( `<input> 和 <textarea>`)
onsubmit	表单提交时触发

onfocusin事件和onfocusout事件

onfocusin 事件在一个元素即将获得焦点时触发，onfocusout 事件在元素即将失去焦点时触发

提示： onfocusin/onfocusout 事件类似于onfocus/onblur事件。主要的区别是 onfocus/onblur 事件不支持冒泡。因此，如果你想知道元素或者其子元素是否获取焦点，需要使用onfocusin/onfocusout事件。

虽然 Firefox 浏览器不支持 onfocusin/onfocusout 事件，但你可以通过使用 onfocus（使用addEventListener()方法的可选参数useCapture）的捕获监听事件来查看元素或其子元素是否获取焦点。

oninput事件

oninput事件在用户输入时触发。该事件类似于onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发，onchange在元素失去焦点时触发。另外一点不同是onchange事件也可以作用于<keygen>和<select>元素

剪贴板事件

属性	描述
oncopy	用户拷贝元素内容时触发
oncut	用户剪切元素内容时触发
onpaste	用户粘贴元素内容时触发

打印事件

属性	描述
onafterprint	页面已经开始打印，或者打印窗口已经关闭时触发
onbeforeprint	页面即将开始打印时触发

拖动事件

属性	描述
ondrag	元素正在拖动时触发
ondragend	用户完成元素的拖动时触发
ondragenter	拖动的元素进入放置目标时触发
ondragleave	拖动元素离开放置目标时触发
ondragover	拖动元素在放置目标上时触发
ondragstart	用户开始拖动元素时触发
ondrop	拖动元素放置在目标区域时触发

多媒体（Media）事件

属性	描述
onabort	视频/音频（audio/video）终止加载时触发
oncanplay	用户可以开始播放视频/音频（audio/video）时触发
oncanplaythrough	视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发
ondurationchange	视频/音频（audio/video）的时长发生变化时触发
onemptied	播放列表为空时触发
onended	视频/音频（audio/video）播放结束时触发
onerror	视频/音频（audio/video）数据加载期间发生错误时触发
onloadeddata	浏览器加载视频/音频（audio/video）当前帧时触发触发
onloadedmetadata	指定视频/音频（audio/video）的元数据加载后触发
onloadstart	浏览器开始寻找指定视频/音频（audio/video）触发
onpause	视频/音频（audio/video）暂停时触发
onplay	视频/音频（audio/video）开始播放时触发
onplaying	视频/音频(audio/video)暂停或者在缓冲后准备重新开始播放时触发
onprogress	浏览器下载指定的视频/音频（audio/video）时触发
onratechange	视频/音频（audio/video）的播放速度发送改变时触发
onseeked	用户重新定位视频/音频（audio/video）的播放位置后触发
onseeking	用户开始重新定位视频/音频（audio/video）时触发
onstalled	浏览器获取媒体数据，但媒体数据不可用时触发
onsuspend	浏览器读取媒体数据中止时触发
ontimeupdate	当前的播放位置发送改变时触发
onvolumechange	音量发生改变时触发
onwaiting	视频由于要播放下一帧而需要缓冲时触发

动画事件

属性	描述
animationend	CSS 动画结束播放时触发
animationiteration	CSS 动画重复播放时触发
animationstart	CSS 动画开始播放时触发

过渡事件

属性	描述
transitionend	CSS 完成过渡后触发

其他事件

属性	描述
onmessage	对象(WebSocket/Web Worker/Event Source/子frame/父窗口)接收到消息时触发
onmousewheel	已废弃。使用onwheel 事件替代
ononline	浏览器开始在线工作时触发
onoffline	浏览器开始离线工作时触发
onpopstate	窗口的浏览历史（history 对象）发生改变时触发
onshow	元素在上下文菜单显示时触发
onstorage	Web Storage(HTML 5 Web 存储)更新时触发
ontoggle	用户打开或关闭元素时触发
onwheel	鼠标滚轮在元素上下滚动时触发

事件对象

常量

静态变量	描述
CAPTURING-PHASE	当前事件阶段为捕获阶段(3)
AT-TARGET	当前事件是目标阶段,在评估目标事件(1)
BUBBLING-PHASE	当前的事件为冒泡阶段 (2)

属性

属性	描述
bubbles	返回布尔值，指示事件是否是起泡事件类型
cancelable	返回布尔值，指示事件是否可拥可取消的默认动作
currentTarget	返回其事件监听器触发该事件的元素
eventPhase	返回事件传播的当前阶段
target	返回触发此事件的元素（事件的目标节点）
timeStamp	返回事件生成的日期和时间
type	返回当前 Event 对象表示的事件的名称

bubbles 事件属性

bubbles事件属性返回一个布尔值，如果事件是起泡类型，则返回 true，否则返回 fasle

事件冒泡分为三个阶段，它是这样的:

第一，捕获阶段。事件从 Document 对象沿着文档树向下传递给目标节点。如果目标的任何一个先辈专门注册了捕获事件句柄，那么在事件传播过程中运行这些句柄

第二个阶段发生在目标节点自身。直接注册砸目标上的适合的事件句柄将运行。这与 0 级事件模型提供的事件处理方法相似

第三，起泡阶段。在此阶段，事件将从目标元素向上传播回或起泡回 Document 对象的文档层次。

方法

方法	描述
initEvent()	初始化新创建的 Event 对象的属性
preventDefault()	通知浏览器不要执行与事件关联的默认动作
stopPropagation()	不再派发事件

目标事件对象

方法

方法	描述
addEventListener()	允许在目标事件中注册监听事件(IE8= attachEvent())
dispatchEvent()	允许发送事件到监听器上 (IE8 =fireEvent())
removeEventListener()	运行一次注册在事件目标上的监听事件(IE8 =detachEvent())

事件监听对象

方法

方法	描述
handleEvent()	把任意对象注册为事件处理程序

文档事件对象

方法

方法	描述
createEvent()

鼠标/键盘事件对象

属性

属性	描述
altKey	返回当事件被触发时，"ALT" 是否被按下
button	返回当事件被触发时，哪个鼠标按钮被点击
clientX	返回当事件被触发时，鼠标指针的水平坐标
clientY	返回当事件被触发时，鼠标指针的垂直坐标
ctrlKey	返回当事件被触发时，"CTRL" 键是否被按下
Location	返回按键在设备上的位置
charCode	返回onkeypress事件触发键值的字母代码
key	在按下按键时返回按键的标识符
keyCode	返回onkeypress事件触发的键值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码
which	返回onkeypress事件触发的键值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码
metaKey	返回当事件被触发时，"meta" 键是否被按下
relatedTarget	返回与事件的目标节点相关的节点
screenX	返回当某个事件被触发时，鼠标指针的水平坐标
screenY	返回当某个事件被触发时，鼠标指针的垂直坐标
shiftKey	返回当事件被触发时，"SHIFT" 键是否被按下

button 事件属性

button 事件属性可返回一个整数，指示当事件被触发时哪个鼠标按键被点击

语法

event.button=0|1|2//0:指定鼠标左键;1:指定鼠标中键;2:指定鼠标右键

注意： Internet Explorer 8 及更早IE版本:

1:指定鼠标左键;4:指定鼠标中键;2:指定鼠标右键

location 事件属性

location 属性返回按键在键盘或设置上的位置。数字可由 4 个常数表示：

DOM_KEY_LOCATION_STANDARD:表示不是最左边或者最右边的按键，也不是数字键盘上的数字（该值几乎包含了所有的按键，如 "A", "U", "SPACE" 或 "5")
DOM_KEY_LOCATION_LEFT:左侧按键 (如果左侧的 "CTRL" 键或左侧的"ALT" 键)
DOM_KEY_LOCATION_RIGHT:右侧按键 (如果右侧的 "CTRL" 键或左侧的"ALT" 键)
DOM_KEY_LOCATION_NUMPAD:数字按键（在标准键盘的右侧）

注意： location 属性可用于onkeydown 和 onkeyup 事件，但不能用于onkeypress事件。该属性是只读的

charCode 属性

charCode 属性返回onkeypress事件触发键值的字母代码。Unicode 字符代码是一个字母的数字 (如数字 "97" 代表字母 "a")。

提示：如果你需要将 Unicode 值转换为字符，可以使用 fromCharCode() 方法。

注意：如果该属性用于onkeydown 或 onkeyup 事件，返回值总为 "0"。该属性是只读的。

注意：IE8 及其更早版本不支持 which 属性。不支持的浏览器可使用 keyCode 属性。但是， keyCode 属性在 Firefox 浏览器的 onkeypress 事件中是无效的。兼容这些浏览器你可以使用以下代码：

var x = event.charCode || event.keyCode; // 使用 charCode 或 keyCode, 这样可支持不同浏览器

两种代码类型的区别是:

字符代码 - 表示 ASCII 字符的数字

键盘代码 - 表示键盘上真实键的数字

两种类型的值不是都相等的，例如小写字符"w" 和大写字符 "W" 有相同的键盘代码，因为他们他们键盘上 ( "W" 代码为 "87")，但是它们有不同的字符代码，两个字符输出是不一样的( "w" 和 "W" 字符代码为"119" 和 "87")

IE8 及其更早版本不支持 which 属性。不支持的浏览器可使用keyCode 属性。但是， keyCode 属性在 Firefox 浏览器的 onkeypress 事件中是无效的。兼容这些浏览器你可以使用以下代码：

var x = event.which || event.keyCode;  // 使用 which 或 keyCode, 这样可支持不同浏览器

方法

方法	描述
initMouseEvent()	初始化鼠标事件对象的值
initKeyboardEvent()	初始化键盘事件对象的值

码农公寓