最新的Web开发教程
 

HTML DOM事件


HTML DOM事件

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

事件组合通常用于与功能,并在事件发生前的功能不会被执行(such as when a user clicks a button)

Tip:事件模型是由W3C DOM级别2规范。


HTML DOM事件

DOM:表示在引入DOM级别的属性。

鼠标事件

事件 描述 DOM
的onclick 当用户点击一个元件上发生的事件 2
oncontextmenu 发生事件,当元件在用户右键点击,以打开上下文菜单 3
onfocus此 该事件发生时,用户双击当一个元件上 2
onmousedown事件 当用户在一个元素按下鼠标按钮时发生的事件 2
OnMouseEnter在 当指针移动到一个元件发生事件 2
OnMouseLeave在 当指针移出元素的发生的事件 2
的OnMouseMove 事件当指针移动,而它是在一个元素上发生 2
的onmouseover 当指针移动到一个元素,或在它的一个子发生的事件 2
的onmouseout 当用户移动鼠标指针出的元件的,或将其子之一发生的情况下 2
onmouseup 当用户在一个元件释放鼠标按钮时发生的事件 2

键盘事件

事件 描述 DOM
onkeydown事件 当用户按压一键时发生的事件 2
onkeypress事件 当用户按下某个键时发生的事件 2
的onkeyup 当用户释放一个键时发生的事件 2

帧/对象活动

事件 描述 DOM
onabort 当资源的加载已中止发生的事件 2
onbeforeunload 面前的这份文件即将被卸载时发生的事件 2
的onerror 当在加载外部文件时出错,发生事件 2
onhashchange 当出现了改变URL的锚部分发生的事件 3
负载 当对象已加载发生的事件 2
onpageshow 当用户浏览一个网页时发生的事件 3
onpagehide 当用户从一个网页导航离开此事件发生 3
在onResize 当文档视图被调整大小时发生事件 2
onscroll 当一个元素的滚动条被滚动时发生的事件 2
onunload的 一旦页面被卸载时发生的事件(对于<BODY>) 2

形式活动

事件 描述 DOM
的onblur 当元件失去焦点时发生事件 2
平变化 当窗体元件,选择,或所检查的状态的内容发生了变化时发生的事件(for <input>, <keygen>, <select>, and <textarea>) 2
聚焦状态 当元件获得焦点发生事件 2
onfocusin 当一个元素即将获得焦点时发生的事件 2
onfocusout在 当一个元素即将失去焦点时发生的事件 2
oninput 当元件获取的用户输入时发生的事件 3
oninvalid 当元件是无效时发生事件 3
onreset 当一个形式是复位发生时,事件 2
onsearch 当用户在搜索字段中写入的东西发生事件(<=输入“搜索”>) 3
ONSELECT 用户选择某些文本后发生的事件(for <input> and <textarea>) 2
的onsubmit 当表单提交时发生的事件 2

拖动事件

事件 描述 DOM
ondrag当 当被拖动的元素发生事件 3
ondragend 当用户已经完成拖动元件发生事件 3
ondragenter 当拖动的元素进入放置目标发生事件 3
ondragleave 当拖动的元素离开放置目标发生事件 3
ondragover 当拖动的元素是在放置目标发生事件 3
ondragstart 当用户开始拖动一个元件发生事件 3
ondrop 当拖动的元素上放置目标下降发生的事件 3

剪贴板活动

事件 描述 DOM
oncopy 该事件发生时的元件的用户副本时,该内容
oncut 当用户切断的元素的含量发生事件
onpaste 当用户粘贴中的一个元素的某些内容发生事件

打印事件

事件 描述 DOM
onafterprint 该事件当一个页面已经开始打印,或如果打印对话框已关闭时 3
onbeforeprint 当网页是关于要被打印时发生的事件 3

媒体活动

事件 描述 DOM
onabort 当媒体的加载被中止发生事件 3
oncanplay 此事件发生时(当它缓冲到足以开始),浏览器就可以开始播放媒体 3
oncanplaythrough 此事件发生时,浏览器可以通过媒体不必停止缓冲玩 3
ondurationchange 在媒体的持续时间更改时发生的事件 3
onemptied 当坏事发生,并把媒体文件突然发生不可用的事件(like unexpectedly disconnects) 3
onended 当媒体有到达终点时发生的事件(useful for messages like "thanks for listening") 3
的onerror 发生该事件时,媒体文件的加载过程中出现错误 3
onloadeddata 当媒体数据被加载发生的事件 3
onloadedmetadata 当元数据发生事件(like dimensions and duration)是加载 3
onloadstart 当浏览器开始寻找指定的媒体发生的事件 3
在onPause 当媒体被暂停由用户或程序发生事件 3
onplay 当媒体已经开始发生事件或不再暂停 3
onplaying 当媒体已经暂停或停止缓冲播放后发生的事件 3
onprogress 当浏览器是在得到媒体数据的过程中发生的事件(downloading the media) 3
onratechange 当媒体的播放速度更改时发生的事件 3
onseeked 当用户完成移动/跳过在媒体中的新位置发生事件 3
onseeking 当用户开始移动/跳过在媒体中的新位置发生事件 3
onstalled 当浏览器试图让媒体数据时发生的事件,但数据不可用 3
onsuspend 当浏览器是故意没有得到媒体数据时发生的事件 3
ontimeupdate 当播放位置已经改变时发生的事件(如,当用户快进到不同的点在媒体) 3
onvolumechange 当媒体的体积已经改变(包括设置音量为“静音”)发生的情况下 3
onwaiting 当媒体已经暂停发生的事件,但有望恢复(当媒体暂停缓冲更多的数据等) 3

动画事件

事件 描述 DOM
animationend 当CSS动画完成时发生的事件 3
animationiteration 当重复CSS动画此事件发生 3
animationstart 当CSS动画已经开始发生事件 3

转换事件

事件 描述 DOM
transitionend 当CSS过渡已经完成发生的事件 3

服务器发送事件

事件 描述 DOM
的onerror 当与事件源中发生错误时发生的事件
的onMessage 当通过事件源接收到的消息发生的情况下
的OnOpen 与事件源的连接被打开时产生的事件

其它活动

事件 描述 DOM
的onMessage 当通过或从物体接收到的消息发生的情况下(WebSocket, Web Worker, Event Source or a child frame or a parent window) 3
onmousewheel 已过时。 使用onwheel事件,而不是
ononline 当浏览器启动联机工作时发生的事件 3
onoffline 当浏览器开始脱机工作时发生的事件 3
onpopstate 当窗口的历史变化发生的事件 3
展出 当发生事件<menu>元件被示出为上下文菜单 3
onstorage 当Web存储区域被更新时发生的事件 3
ontoggle 当用户打开或关闭时发生事件<details>元件 3
onwheel 当鼠标滚轮或在元件卷起向下发生事件 3

触摸事件

事件 描述 DOM
ontouchcancel 当触摸被中断时发生的事件
ontouchend 当手指从触摸屏移除时发生的事件
ontouchmove 当手指在屏幕上拖动此事件发生
ontouchstart 当手指被放置在触摸屏上发生的事件

事件对象

常量

不变 描述 DOM
CAPTURING_PHASE 当前的事件阶段是捕获阶段(1) 1
AT_TARGET 当前事件是在目标相位,即,它是在目标事件被评估(2) 2
BUBBLING_PHASE 当前的事件阶段是冒泡阶段(3) 3

属性

属性 描述 DOM
泡泡 返回特定事件是否为冒泡事件 2
取消 返回是否不是一个事件都可以有其默认动作。 2
currentTarget当前 返回其事件监听器触发事件​​的元素 2
defaultPrevented 在返回是否preventDefault()方法被调用的事件 3
的EventPhase 该事件流的相位目前正在评估返回 2
isTrusted 返回一个事件是否是可信的 3
目标 返回触发事件的元素 2
的timeStamp 返回时间(in milliseconds relative to the epoch)在其上创建该事件 2
类型 返回事件的名称 2
视图 返回到窗口对象,其中发生了此事件的参考 2

方法

方法 描述 DOM
preventDefault() 取消的事件,如果是取消,这意味着不会发生属于该事件的默认操作 2
stopImmediatePropagation() 防止同一事件的其他监听器被调用 3
stopPropagation() 防止事件流中的事件的进一步传播 2

MouseEvent对象

属性 描述 DOM
ALT键 返回是否"ALT" ,当鼠标事件被触发键被按下 2
按键 当鼠标事件被触发按下返回哪个鼠标按钮 2
纽扣 当鼠标事件被触发被压返回哪个鼠标按键 3
clientX 返回当鼠标事件被触发的鼠标指针,相对于当前窗口中,水平坐标 2
clientY 返回鼠标指针,相对于当前窗口,垂直坐标,当鼠标事件被触发 2
中ctrlKey 返回是否"CTRL"当被触发时,鼠标事件中被按下键 2
详情 返回一个数字,表示鼠标被点击了多少次 2
metaKey 返回是否"META" ,当事件被触发键被按下 2
pageX属性 返回当鼠标事件被触发的鼠标指针,相对于所述文档的水平坐标
pageY 返回鼠标指针,相对于文档的纵坐标,当鼠标事件被触发
relatedTarget 返回与触发鼠标事件元素的元素 2
screenX 返回当事件被触发的鼠标指针,相对于屏幕的水平坐标 2
screenY 返回鼠标指针,相对于屏幕的垂直坐标时事件被触发 2
Shift键, 返回是否"SHIFT" ,当事件被触发键被按下 2
哪一个 当鼠标事件被触发按下返回哪个鼠标按钮 2

KeyboardEvent对象

属性 描述 DOM
ALT键 返回是否"ALT"时的关键事件被触发键被按下 2
中ctrlKey 返回是否"CTRL"时的关键事件被触发键被按下 2
则charCode 返回触发onkeypress事件事件的键的Unicode字符码 2
返回由事件所代表的密钥的密钥值 3
关键代码 返回触发onkeypress事件事件的关键,或触发的onkeydown或onkeyup事件的关键的Unicode按键代码的Unicode字符码 2
位置 返回键盘或设备上的按键的位置 3
metaKey 返回是否"meta"时被触发的关键事件按键 2
Shift键, 返回是否"SHIFT"时的关键事件被触发键被按下 2
哪一个 返回触发onkeypress事件事件的关键,或触发的onkeydown或onkeyup事件的关键的Unicode按键代码的Unicode字符码 2

HashChangeEvent对象

属性 描述 DOM
的newURL 返回文档的URL,哈希已被更改后,
OLDURL 返回文档的URL,哈希被改变之前,

PageTransitionEvent对象

属性 描述 DOM
坚持 是否返回的网页被浏览器缓存

FocusEvent对象

属性 描述 DOM
relatedTarget 返回相关的触发事件的元素的元素 3

AnimationEvent对象

属性 描述 DOM
animationName 返回动画名称
elapsedTime 返回的秒数动画已经运行

TransitionEvent对象

属性 描述 DOM
propertyName的 返回CSS属性与转型相关的名称
elapsedTime 返回的秒数的过渡已经运行

WheelEvent对象

属性 描述 DOM
DELTAX 返回一个鼠标滚轮的水平滚动量(x-axis) 3
移动deltaY 返回一个鼠标滚轮的垂直滚动量(y-axis) 3
deltaZ 返回一个鼠标滚轮的滚动量为z轴 3
deltaMode 返回一个数字,表示用于增量值测量单元(pixels, lines or pages) 3