Create proper DOM events from string

[fregante]

When creating events, you should use the right constructor. For example new MouseEvent('click') instead of a plain new Event('click').

As far as I know there's no way to this automatically so there could be DOM event creator that includes such map.

import createEvent from '✨';

document.body.dispatchEvent(createEvent('keydown', {key: 'a'}))

This particularly useful when your app can trigger a variety of events and you can't be bothered to match them manually 😃

import createEvent from '✨';

const eventsToDispatch = ['mousedown', 'pointerdown', 'click', 'mouseup', 'pointerup']
for (const eventName of eventsToDispatch)
	document.body.dispatchEvent(createEvent(eventName))

[Richienb]

I was able to compile a list of dom events but I ran into a bit of trouble when writing the TypeScript definition since the event name needs to be detected to determine the return value.

[fregante]

It's not super easy, but you can use generics to maintain the mapping. Something like:

const events = {
	click: MouseEvent
} as const;
type Events = typeof events;
function createEvent<Name extends keyof Events >(name: Name): Events[Name] {
//
}

What's missing from here:

• allowing unknown events
• mapping unknown events to CustomEvent