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