Event对象
Event对象
Event
对象表示在DOM
中出现的事件,在DOM
中有许多不同类型的事件,其主要使用基于Event
对象作为主接口的二次接口,Event
对象本身包含适用于所有事件的属性和方法。
描述
事件有很多类型,一些事件是由用户触发的,例如鼠标或键盘事件,而其他事件常由API
生成,例如指示动画已经完成运行的事件,视频已被暂停等等,事件也可以通过脚本代码触发,例如对元素调用HTMLElement.click()
方法,或者定义一些自定义事件,再使用EventTarget.dispatchEvent()
方法将自定义事件派发往指定的目标target
。
一个元素可以绑定多个事件处理函数,甚至是同一种类型的事件,尤其是这种分离的,并且相互独立的代码模块对同一个元素绑定事件处理函数,每一个模块代码都有着独立的目的。通过EventTarget.addEventListener()
方法可以将事件处理函数绑定到不同的HTML elements
上。这种绑定事件处理函数的方式基本替换了老版本中使用HTML event handler attributes
即DOM0
级事件来绑定事件处理函数的方式,除此之外通过使用removeEventListener()
方法,这些事件处理函数也能被移除。
当有很多嵌套的元素,并且每一个元素都有着自己的事件处理函数,事件处理过程会变得非常复杂,尤其当一个父元素和子元素绑定有相同类型的事件处理函数的时候,因为结构上的重叠,事件处理函数可能会依次被触发,触发的顺序取决于事件冒泡和事件捕获在每一个元素上的设置情况。
下面是主要基于Event
接口的接口列表,需要注意的是,所有的事件接口名称都是以Event
结尾的。
AnimationEvent
AudioProcessingEvent
BeforeInputEvent
BeforeUnloadEvent
BlobEvent
ClipboardEvent
CloseEvent
CompositionEvent
CSSFontFaceLoadEvent
CustomEvent
DeviceLightEvent
DeviceMotionEvent
DeviceOrientationEvent
DeviceProximityEvent
DOMTransactionEvent
DragEvent
EditingBeforeInputEvent
ErrorEvent
FetchEvent
FocusEvent
GamepadEvent
HashChangeEvent
IDBVersionChangeEvent
InputEvent
KeyboardEvent
MediaStreamEvent
MessageEvent
MouseEvent
MutationEvent
OfflineAudioCompletionEvent
OverconstrainedError
PageTransitionEvent
PaymentRequestUpdateEvent
PointerEvent
PopStateEvent
ProgressEvent
RelatedEvent
RTCDataChannelEvent
RTCIdentityErrorEvent
RTCIdentityEvent
RTCPeerConnectionIceEvent
SensorEvent
StorageEvent
SVGEvent
SVGZoomEvent
TimeEvent
TouchEvent
TrackEvent
TransitionEvent
UIEvent
UserProximityEvent
WebGLContextEvent
WheelEvent
属性
Event.prototype.bubbles
: 只读,返回一个布尔值,用来表示该事件是否会在DOM
中冒泡。Event.prototype.cancelBubble
:Event.prototype.stopPropagation()
的历史别名,在事件处理器函数返回之前,将此属性的值设置为true
,亦可阻止事件继续冒泡。Event.prototype.cancelable
: 只读,返回一个布尔值,表示事件是否可以取消。Event.prototype.composed
: 只读,返回一个布尔值,表示事件是否可以穿过Shadow DOM
和常规DOM
之间的隔阂进行冒泡。Event.prototype.currentTarget
: 只读,对事件当前注册的目标的引用。这是一个当前计划将事件发送到的对象,它是有可能在重定向的过程中被改变的。Event.prototype.deepPath
: 一个由事件流所经过的DOM
节点组成的数组。Event.prototype.defaultPrevented
: 只读,返回一个布尔值,表示event.preventDefault()
方法是否取消了事件的默认行为。Event.prototype.eventPhase
: 只读,表示事件流正被处理到了哪个阶段。Event.prototype.explicitOriginalTarget
: 只读,事件的明确explicit
原始目标,Mozilla
专有属性。Event.prototype.originalTarget
: 只读,重设目标前的事件原始目标,Mozilla
专有属性。Event.prototype.returnValue
: 旧版Internet Explorer
引入的一个非标准历史属性,为保证依赖此属性的网页正常运作,此属性最终被收入规范,可用Event.prototype.preventDefault()
与event.defaultPrevented
代替,但由于已进入规范,也可以使用此属性。Event.prototype.srcElement
: 旧版Internet Explorer
对event.target
的非标准别称,出于兼容原因,一些其他浏览器也支持此别称。Event.prototype.target
: 只读,对事件原始目标的引用,这里的原始目标指最初派发dispatch
事件时指定的目标。Event.prototype.timeStamp
: 只读,事件创建时的时间戳,精度为毫秒,按照规范这个时间戳是Unix
纪元起经过的毫秒数,但实际上在不同的浏览器中,对此时间戳的定义也有所不同,另外规范正在将其修改为DOMHighResTimeStamp
。Event.prototype.type
: 只读,返回事件的类型,不区分大小写。Event.prototype.isTrusted
: 只读,表示事件是由浏览器(例如用户点击)发起的,还是由脚本(使用事件创建方法例如event.initEvent
发出的。
方法
document.captureEvents()
: 创建一个新事件,如果使用此方法创建事件,则必须调用其自身的initEvent()
方法,对其进行初始化。Event.prototype.composedPath()
: 返回事件的路径(将在该对象上调用监听器),如果阴影根节点shadow root
创建时ShadowRoot.mode
值为closed
,那么路径不会包括该根节点下阴影树shadow tree
的节点。Event.prototype.initEvent()
: 为通过createEvent()
创建的事件初始化,该方法对已经被派发的事件无效。Event.prototype.preventDefault()
: 如果该默认事件可取消,则取消默认事件。Event.prototype.stopImmediatePropagation()
: 如果多个事件监听器被附加到相同元素的相同事件类型上,当此事件触发时,它们会按其被添加的顺序被调用,如果在其中一个事件监听器中执行stopImmediatePropagation()
,那么剩下的事件监听器都不会被调用。Event.prototype.stopPropagation
: 停止冒泡,阻止事件在DOM
中继续冒泡。
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://developer.mozilla.org/zh-CN/docs/Web/API/Event
Event对象的更多相关文章
- JS:event对象下的target属性和取消冒泡事件
1.target 通过获取DOM元素 var box = document.getElementById("box"); document.box.onclick = functi ...
- 一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别
总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕,于是决定做个图来区分一下(画得我手那个酸呀....) 先总结下区别: event.c ...
- 【前端】原生event对象和jquery event对象的区别
标准DOM event对象转换成 jQuery event对象 $(event) jQuery event对象转换成 标准DOM event对象 event.originalEvent
- dom事件与event对象总结
1 事件:就是文档或浏览器窗口中发生的一些特定的交互瞬间. tips:js和xhtml的交互是通过当用户或浏览器操作网页时发生的事件来处理的. 1.1 事件流:即事件的顺序. 事件 ...
- html EVENT对象
Event 对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行! onabort 图像的加 ...
- HTML DOM Event对象
我们通常把HTML DOM Event对象叫做Event事件 事件驱动模型 事件源:(触发事件的元素)事件源对象是指event对象 其封装了与事件相关的详细信息. 当事件发生时,只能在事件函数内部访问 ...
- IE8下获取iframe document EVENT对象的问题
在一个页面中设置iframe的document Onclick 事件获取在iframe中的document被点击的对象,W3C如下: document.getElementById('iframe的I ...
- javascript高级程序设计---Event对象二
鼠标事件 事件种类 鼠标事件指与鼠标相关的事件,主要有以下一些. (1)click事件 click事件当用户在Element节点.document节点.window对象上,单击鼠标(或者按下回车键)时 ...
- javascript高级程序设计---Event对象
事件是一种异步编程的实现方式,本质上是程序各个组成部分之间传递的特定消息. DOM的事件操作(监听和触发),都定义在EventTarget接口 该接口就是三个方法,addEventListener和r ...
- javascript事件与event对象的属性
javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...
随机推荐
- 【MicroPython】用 c 添加接口 -- 给 module 添加 function
[来源]https://www.eemaker.com/micropython-c-modfunc.html
- CSS - 工具类 tool.css
/* flex */ .flex{ display: flex; } .f1{ flex:1 } .flex-center{ align-items: center; ...
- [转帖]SQL SERVER中什么情况会导致索引查找变成索引扫描
https://www.cnblogs.com/kerrycode/p/4806236.html SQL Server 中什么情况会导致其执行计划从索引查找(Index Seek)变成索引扫描(Ind ...
- [转帖]Kafka中offsets.retention.minutes和log.retention.minutes之间的区别
https://www.cnblogs.com/lestatzhang/p/10771115.html 前言 在Kafka中,我们可能会发现两个与retention相关的配置: log.retenti ...
- [转帖]TiDB系统调参实战经验
https://tidb.net/blog/c9466c40#TiDB%E7%B3%BB%E7%BB%9F%E8%B0%83%E5%8F%82%E5%AE%9E%E6%88%98%E7%BB%8F%E ...
- [转帖]怎么查看Linux服务器硬件信息,这些命令告诉你
https://zhuanlan.zhihu.com/p/144368206 Linux服务器配置文档找不到,你还在为查询Linux服务器硬件信息发愁吗?学会这些命令,让你轻松查看Linux服务器的C ...
- 【转帖】Linux多链路聚合技术
https://www.jianshu.com/p/dd8587ecf54f 一般而言,在单体结构的操作系统中,一块物理磁盘会接在总线设备上,并经由总线分配 PCI-Bus 号,这个时候一个 bus ...
- [转帖]Linux下使用 ipset 封大量IP及ipset参数说明
https://www.cnblogs.com/xiaofeng666/p/10952627.html Linux使用iptables封IP,是常用的应对网络攻击的方法,但要封禁成千上万个IP,如果添 ...
- [转帖]linux下 进程io队列,IO队列和IO调度
IO体系概览 先看看本文主题IO调度和IO队列处于整个IO体系的哪个位置,这个IO体系是非常重要的,了解IO体系我们可以对整个IO过程有个全面的认识.虽然一下两下并不清楚IO体系各个部分的细节,但是我 ...
- [转帖]Elasticsearch 技术分析(五):如何通过SQL查询Elasticsearch
https://www.cnblogs.com/jajian/p/10053504.html 前言# 这篇博文本来是想放在全系列的大概第五.六篇的时候再讲的,毕竟查询是在索引创建.索引文档数据生成和一 ...