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 |