How to create native events from strings using event constructors?

Question

The document.createEvent API is being deprecated. It allowed for native browser event creation using using the string names of those events. The now recommended way is to use event constructors instead.

i.e. createEvent("HtmlEvents") has now become new HtmlEvent().

Is it possible to create these events with an event constructor using strings? i.e. new CustomEvent("HtmlEvents")?

The [documentation of the `CustomEvent` constructor](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent) has an example... — Heretic Monkey, Jun 26 '20 at 13:22
@HereticMonkey the question is, if I create a `new CustomEvent("HtmlEvents")`, will it behave the same as an event created using `document.createEvent("HtmlEvents")`. — Busti, Jun 26 '20 at 13:25
No, because there is no such built-in event type `HtmlEvents`. I mean, it's easy to check, right? Just run `document.createEvent("HtmlEvents")` in the console and compare the output with `new CustomEvent("HtmlEvents")`... — Heretic Monkey, Jun 26 '20 at 13:27
@HereticMonkey That's the problem. I need to create these events using strings as a migration for old code. I could of course just make a giant switch statement with a case for each event, but I would like to avoid that. — Busti, Jun 26 '20 at 13:30
@HereticMonkey A little, but the old event types usually have pluralized names. I have tried searching for a list of all the names, but have not found any yet. It's either this, or migrating ~1500 tests. — Busti, Jun 26 '20 at 13:37

score 1 · Answer 1 · answered Jun 26 '20 at 13:21

1

I think this will help you

var event = new Event('build');

// Listen for the event.
elem.addEventListener('build', function (e) { /* ... */ }, false);

// Dispatch the event.
elem.dispatchEvent(event);

for creating custom event

var event = new CustomEvent('build', { detail: elem.dataset.time });
function eventHandler(e) {
  console.log('The time is: ' + e.detail);
}

answered Jun 26 '20 at 13:21

Vivek Kumar Shukla

191
1
11

Unfortunately it does not. I need to know how to create the native event types, i.e. `new MouseEvent` or `new HtmlEvent` using string names. I need to migrate old code which makes use of these names. – Busti Jun 26 '20 at 13:23

score 1 · Accepted Answer · answered Jun 26 '20 at 13:35

1

Even the event constructors are just keys on the global window object:

function createEvent(type, ...eventArgs) {
  return new window[type](eventArgs);
}

// examples:
console.log(
  createEvent("KeyboardEvent", "keyboard event name"),
  createEvent("MouseEvent", "mouse event name"),
);

answered Jun 26 '20 at 13:35

pretzelhammer

13,874
15
47
98

Interesting... How come the `createEvent` names are pluralized while the constructors are not? *Edit: * Looks like it's both https://developer.mozilla.org/en-US/docs/Web/API/Document/createEvent#Notes – Busti Jun 26 '20 at 13:38
3

This is exactly what the answers to the proposed duplicate say. – Heretic Monkey Jun 26 '20 at 13:39
1

@HereticMonkey thanks for pointing that out, I didn't see that while writing my answer. I voted to close in favor of the duplicate. – pretzelhammer Jun 26 '20 at 13:41

How to create native events from strings using event constructors?

2 Answers2