Event Object

The Event object represents an event that occurs in the DOM. There are many different types of events in the DOM, and they primarily use secondary interfaces based on the Event object as the main interface. The Event object itself contains properties and methods that are applicable to all events.

Description

There are many types of events. Some events are triggered by the user, such as mouse or keyboard events, while others are typically generated by the API, such as events indicating that an animation has completed, a video has been paused, and so on. Events can also be triggered by script code, for example by calling the HTMLElement.click() method on an element, or by defining custom events and dispatching them to a specified target using the EventTarget.dispatchEvent() method. An element can have multiple event handling functions bound to it, even for the same type of event. Especially in this case, separate and independent code modules bind event handling functions to the same element, each with its own distinct purpose. Event handling functions can be bound to different HTML elements using the EventTarget.addEventListener() method. This method of binding event handling functions essentially replaces the old-fashioned way of binding event handling functions using HTML event handler attributes, that is, the DOM0 level events. In addition, these event handling functions can also be removed using the removeEventListener() method. When there are many nested elements, each with its own event handling functions, the event handling process can become very complex, especially when a parent element and a child element are both bound with event handling functions of the same type. Due to structural overlap, event handling functions may be triggered in sequence, and the order of triggering depends on the setting of event bubbling and event capturing on each element. Below is the list of primary interfaces based on the Event interface. It should be noted that all event interface names end with 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

Properties

  • Event.prototype.bubbles: Read-only, returns a boolean value indicating whether the event will bubble in the DOM.
  • Event.prototype.cancelBubble: The historical alias of Event.prototype.stopPropagation(), sets the value of this property to true before the event handler function returns, thereby preventing the event from continuing to bubble.
  • Event.prototype.cancelable: Read-only, returns a boolean value indicating whether the event can be canceled.
  • Event.prototype.composed: Read-only, returns a boolean value indicating whether the event can propagate through the boundary between Shadow DOM and regular DOM.
  • Event.prototype.currentTarget: Read-only, a reference to the target at which the event is currently being processed. This is the object to which the event is targeted for delivery, and it could be changed during the redirection process.
  • Event.prototype.deepPath: An array of DOM nodes through which the event flow has passed.
  • Event.prototype.defaultPrevented: Read-only, returns a boolean value indicating whether the event.preventDefault() method has canceled the event's default behavior.
  • Event.prototype.eventPhase: Read-only, indicates the phase in which the event flow is being processed.
  • Event.prototype.explicitOriginalTarget: Read-only, the explicit original target of the event, a proprietary property of Mozilla.
  • Event.prototype.originalTarget: Read-only, the original target of the event before being retargeted, a proprietary property of Mozilla.
  • Event.prototype.returnValue: An old, non-standard historical property introduced by older versions of Internet Explorer. To ensure proper operation of web pages that depend on this property, it has ultimately been standardized and can be replaced with Event.prototype.preventDefault() and event.defaultPrevented. However, because it has been standardized, this property can still be used.
  • Event.prototype.srcElement: An old, non-standard alias for event.target in older versions of Internet Explorer, supported by some other browsers for compatibility reasons.
  • Event.prototype.target: Read-only, a reference to the original target of the event, where the original target refers to the target specified when the dispatch event was initially dispatched.
  • Event.prototype.timeStamp: Read-only, the timestamp when the event was created, with millisecond precision. According to the specification, this timestamp is the number of milliseconds since the Unix epoch. However, in different browsers, the definition of this timestamp also varies. Moreover, the specification is in the process of changing it to DOMHighResTimeStamp.
  • Event.prototype.type: Read-only, returns the type of the event, case-insensitive.
  • Event.prototype.isTrusted: Read-only, indicates whether the event was initiated by the browser (e.g., user click) or by a script (using event creation methods such as event.initEvent).

Methods

  • document.captureEvents(): Creates a new event. If this method is used to create the event, you must call its own initEvent() method to initialize it.

  • Event.prototype.composedPath(): Returns the path of the event (the object on which the listener was attached). If a shadow root ShadowRoot.mode with a value of closed is created, the path will not include nodes of the shadow tree shadow tree under this root node.

  • Event.prototype.initEvent(): Initializes an event created through createEvent(). This method is invalid for events that have already been dispatched.

  • Event.prototype.preventDefault(): Cancels the default event if the default event is cancelable.

  • Event.prototype.stopImmediatePropagation(): If multiple event listeners are attached to the same type of event on the same element, they will be called in the order they were added when the event is triggered. If stopImmediatePropagation() is called in one of the event listeners, the remaining event listeners will not be called.

  • Event.prototype.stopPropagation: Stops bubbling and prevents the event from continuing to bubble in the DOM.

Daily Question

https://github.com/WindrunnerMax/EveryDay

References

https://developer.mozilla.org/en-US/docs/Web/API/Event