Adds onevent property to EventTarget objects.

EventTarget is the official interface for objects which dispatch events and listeners to receive events.

Conventionally, in HTML, there are two types of event listeners:

• addEventListener/removeEventListener functions
• onevent properties

However, EventTarget only offers addEventListener/removeEventListener functions, but not onevent properties.

This package enables onevent properties for objects that extends EventTarget.

The following code snippet adds onload property to an event target.

import { EventTargetProperties, type TypedEventListener } from 'event-target-properties';

class MyEventTarget extends EventTarget {
  constructor() {
    super();

    this.#eventTargetProperties = new EventTargetProperties(this);
  }

  #eventTargetProperties: EventTargetProperties<'load', { load: CustomEvent }>;

  get onload(): TypedEventListener<CustomEvent> | undefined {
    return this.#eventTargetProperties.getProperty('load');
  }

  set onload(value: TypedEventListener<CustomEvent> | null | undefined) {
    this.#eventTargetProperties.setProperty('load', value);
  }
}

According to HTML Living Standard.

The onevent property can be polyfilled via addEventListener/removeEventListener and follow the order designated by EventTarget class.

• When the property is currently unassigned and being assigned, the event listener will be registered via addEventListener
• When the property is currently assigned and being unassigned, it will be unregistered via removeEventListener
• When the property is currently assigned and being assigned to another value, the event listener will not be re-registered again. Thus, the order of property event listener will be preserved

Like us? Star us.

Want to make it better? File us an issue.

Don't like something you see? Submit a pull request.