Event对象

Event对象表示在DOM中出现的事件,在DOM中有许多不同类型的事件,其主要使用基于Event对象作为主接口的二次接口,Event对象本身包含适用于所有事件的属性和方法。

描述

事件有很多类型,一些事件是由用户触发的,例如鼠标或键盘事件,而其他事件常由API生成,例如指示动画已经完成运行的事件,视频已被暂停等等,事件也可以通过脚本代码触发,例如对元素调用HTMLElement.click()方法,或者定义一些自定义事件,再使用EventTarget.dispatchEvent()方法将自定义事件派发往指定的目标target

一个元素可以绑定多个事件处理函数,甚至是同一种类型的事件,尤其是这种分离的,并且相互独立的代码模块对同一个元素绑定事件处理函数,每一个模块代码都有着独立的目的。通过EventTarget.addEventListener()方法可以将事件处理函数绑定到不同的HTML elements上。这种绑定事件处理函数的方式基本替换了老版本中使用HTML event handler attributesDOM0级事件来绑定事件处理函数的方式,除此之外通过使用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 Explorerevent.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对象的更多相关文章

  1. JS:event对象下的target属性和取消冒泡事件

    1.target 通过获取DOM元素 var box = document.getElementById("box"); document.box.onclick = functi ...

  2. 一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别

    总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕,于是决定做个图来区分一下(画得我手那个酸呀....) 先总结下区别: event.c ...

  3. 【前端】原生event对象和jquery event对象的区别

    标准DOM event对象转换成 jQuery event对象 $(event) jQuery event对象转换成 标准DOM event对象 event.originalEvent

  4. dom事件与event对象总结

    1 事件:就是文档或浏览器窗口中发生的一些特定的交互瞬间.    tips:js和xhtml的交互是通过当用户或浏览器操作网页时发生的事件来处理的. 1.1 事件流:即事件的顺序.        事件 ...

  5. html EVENT对象

    Event 对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行! onabort 图像的加 ...

  6. HTML DOM Event对象

    我们通常把HTML DOM Event对象叫做Event事件 事件驱动模型 事件源:(触发事件的元素)事件源对象是指event对象 其封装了与事件相关的详细信息. 当事件发生时,只能在事件函数内部访问 ...

  7. IE8下获取iframe document EVENT对象的问题

    在一个页面中设置iframe的document Onclick 事件获取在iframe中的document被点击的对象,W3C如下: document.getElementById('iframe的I ...

  8. javascript高级程序设计---Event对象二

    鼠标事件 事件种类 鼠标事件指与鼠标相关的事件,主要有以下一些. (1)click事件 click事件当用户在Element节点.document节点.window对象上,单击鼠标(或者按下回车键)时 ...

  9. javascript高级程序设计---Event对象

    事件是一种异步编程的实现方式,本质上是程序各个组成部分之间传递的特定消息. DOM的事件操作(监听和触发),都定义在EventTarget接口 该接口就是三个方法,addEventListener和r ...

  10. javascript事件与event对象的属性

    javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...

随机推荐

  1. 【MicroPython】用 c 添加接口 -- 给 module 添加 function

    [来源]https://www.eemaker.com/micropython-c-modfunc.html

  2. CSS - 工具类 tool.css

    /* flex */ .flex{     display: flex; } .f1{     flex:1 } .flex-center{     align-items: center;      ...

  3. [转帖]SQL SERVER中什么情况会导致索引查找变成索引扫描

    https://www.cnblogs.com/kerrycode/p/4806236.html SQL Server 中什么情况会导致其执行计划从索引查找(Index Seek)变成索引扫描(Ind ...

  4. [转帖]Kafka中offsets.retention.minutes和log.retention.minutes之间的区别

    https://www.cnblogs.com/lestatzhang/p/10771115.html 前言 在Kafka中,我们可能会发现两个与retention相关的配置: log.retenti ...

  5. [转帖]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 ...

  6. [转帖]怎么查看Linux服务器硬件信息,这些命令告诉你

    https://zhuanlan.zhihu.com/p/144368206 Linux服务器配置文档找不到,你还在为查询Linux服务器硬件信息发愁吗?学会这些命令,让你轻松查看Linux服务器的C ...

  7. 【转帖】Linux多链路聚合技术

    https://www.jianshu.com/p/dd8587ecf54f 一般而言,在单体结构的操作系统中,一块物理磁盘会接在总线设备上,并经由总线分配 PCI-Bus 号,这个时候一个 bus  ...

  8. [转帖]Linux下使用 ipset 封大量IP及ipset参数说明

    https://www.cnblogs.com/xiaofeng666/p/10952627.html Linux使用iptables封IP,是常用的应对网络攻击的方法,但要封禁成千上万个IP,如果添 ...

  9. [转帖]linux下 进程io队列,IO队列和IO调度

    IO体系概览 先看看本文主题IO调度和IO队列处于整个IO体系的哪个位置,这个IO体系是非常重要的,了解IO体系我们可以对整个IO过程有个全面的认识.虽然一下两下并不清楚IO体系各个部分的细节,但是我 ...

  10. [转帖]Elasticsearch 技术分析(五):如何通过SQL查询Elasticsearch

    https://www.cnblogs.com/jajian/p/10053504.html 前言# 这篇博文本来是想放在全系列的大概第五.六篇的时候再讲的,毕竟查询是在索引创建.索引文档数据生成和一 ...