How to implement event hierarchy not based in HTML5 elements - html

Question

I want to write a component set out of HTML elements. For example:
export default class Control implements EventTarget {
// parent control, not HTML "parentElement"
parent: Control | null;
private _events: Map<string, EventListener[]> = new Map;
// addEventListener(...) {}
// removeEventListener(...) {}
// dispatchEvent(...) {}
}
Subtype:
export default class TabBar extends Control {
// ...
}
So I'd implement EventTarget and any events would be subtype of the standard DOM's Event type. However, I want to support proper event propagation, both capture and bubbling phases.
The problem is, if I implement the standard DOM's EventTarget type, I must also use the standard DOM's Event type. It's a problem because I'm unable to set the value of event.target, event.currentTarget and event.eventPhase: see the constructor at www.developer.mozilla.org.
One solution is for me to reinvent Event, and consequently reinvent EventTarget, but this would lead to duplicate code and lead to ambiguity. Is there anything I missing?
Another solution is to mix HTML and my component set, where my set will use simple event listening properties, like onchange: ((d: EventData) => void) | null.

Answer 1

It seems not possible to mutate properties like target, eventPhase and so on, which led me to create a small package for constructing your own event listeners where these properties are mutable. Also, you can use TypeScript generics to allow mapping event type (for example, 'mouseover') to event data type (MouseEvent):
import { EventTarget, EventRegistry, Event, } from 'byo-event-system';
interface EventHandlersEventMap {
"someevent": RegExp; // listener takes a RegExp
"anotherevent": boolean; // listener takes a Boolean
}
export class MyType implements EventTarget {
private _eventRegistry = new EventRegistry;
addEventListener<E extends keyof EventHandlersEventMap>(type: E, listener: (evt: EventHandlersEventMap[E]) => void, useCapture: boolean = false): void {
this._eventRegistry.addEventListener(type, listener as ((evt: Event): void), useCapture);
}
removeEventListener<E extends keyof EventHandlersEventMap>(type: E, listener: (evt: EventHandlersEventMap[E]) => void): void {
this._eventRegistry.removeEventListener(type, listener as ((evt: Event): void));
}
dispatchEvent(event: Event): boolean {
return this._eventRegistry.dispatchEvent(event);
}
hasEventListener(type: string): boolean {
return this._eventRegistry.hasEventListener(type);
}
}
You can find it on www.npmjs.com.