HTML DOM 事件对象-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

HTML DOM 事件对象

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

事件是可以被 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 个常数表示:

  1. DOM_KEY_LOCATION_STANDARD:表示不是最左边或者最右边的按键,也不是数字键盘上的数字(该值几乎包含了所有的按键,如 "A", "U", "SPACE" 或 "5")
  2. DOM_KEY_LOCATION_LEFT:左侧按键 (如果左侧的 "CTRL" 键或左侧的"ALT" 键)
  3. DOM_KEY_LOCATION_RIGHT:右侧按键 (如果右侧的 "CTRL" 键或左侧的"ALT" 键)
  4. 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() 初始化键盘事件对象的值

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章