如何使用事件构造函数从字符串创建本机事件？ [复制]答案

【问题标题】：How to create native events from strings using event constructors? [duplicate]如何使用事件构造函数从字符串创建本机事件？ [复制]
【发布时间】：2020-06-26 13:15:13
【问题描述】：

document.createEvent API 已被弃用。它允许使用这些事件的字符串名称创建本机浏览器事件。现在推荐的方法是改用event constructors。

即createEvent("HtmlEvents") 现在变成了new HtmlEvent()。

是否可以通过使用字符串的事件构造函数来创建这些事件？即new CustomEvent("HtmlEvents")?

【问题讨论】：

documentation of the CustomEvent constructor 有一个例子...
@HereticMonkey 问题是，如果我创建一个new CustomEvent("HtmlEvents")，它的行为是否与使用document.createEvent("HtmlEvents") 创建的事件相同。
没有，因为没有这样的内置事件类型HtmlEvents。我的意思是，这很容易检查，对吧？只需在控制台中运行document.createEvent("HtmlEvents") 并将输出与new CustomEvent("HtmlEvents") 进行比较...
@HereticMonkey 这就是问题所在。我需要使用字符串创建这些事件作为旧代码的迁移。我当然可以为每个事件创建一个带有案例的巨大 switch 语句，但我想避免这种情况。
@HereticMonkey 有点，但旧的事件类型通常有复数名称。我已尝试搜索所有名称的列表，但尚未找到任何名称。要么是这个，要么是迁移 ~1500 个测试。

标签： javascript dom events dom-events

【解决方案1】：

甚至事件构造函数也只是全局 window 对象上的键：

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

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

【讨论】：

有趣...为什么createEvent 名称是复数形式而构造函数却不是？ *编辑：* 看起来都是developer.mozilla.org/en-US/docs/Web/API/Document/…
这正是建议副本的答案所说的。
@HereticMonkey 感谢您指出这一点，我在写答案时没有看到这一点。我投票赞成关闭副本。

【解决方案2】：

我想这会对你有所帮助

var event = new Event('build');

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

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

用于创建自定义事件

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

【讨论】：

不幸的是它没有。我需要知道如何使用字符串名称创建本机事件类型，即 new MouseEvent 或 new HtmlEvent。我需要迁移使用这些名称的旧代码。