使用自定义数据创建自定义 DOM 事件答案

【问题标题】：Create custom DOM event with custom data使用自定义数据创建自定义 DOM 事件
【发布时间】：2018-07-23 10:13:26
【问题描述】：

我有这个代码：

   let event = new Event('sumanload', {
      value: 'foo'
    });

    window.dispatchEvent(event);

这是错误：

我想要做的是将自定义数据作为事件数据传递。有没有办法做到这一点？现在，如果您包含未知属性，TypeScript 会报错。

【问题讨论】：

如果你把它传递给实例呢？喜欢event.value = 'foo'?
这可能行得通，我会试试的
这是一个类似的问题 - 我无法在事件本身上定义自定义字段，因为自定义字段/属性不存在......必须有一些正确的方法来做到这一点
那我不知道。我看到其他人在redux 上遇到了类似的问题
你能试试新的CustomEvent 对象吗？它们支持任何数据类型的初始化对象的detail 属性。根据链接，一些浏览器需要一个 polyfill（继续，猜猜哪个）。

【解决方案1】：

您可以尝试使用CustomEvent 而不是Event 对象。自定义事件对象特别允许您将 detail 属性添加到在构造期间作为第二个参数传递的初始化程序对象。

let event = new CustomEvent('sumanload', {
    detail: 'foo'
});

window.dispatchEvent(event);

其中detail 可以是任何数据类型，包括对象。

我过去曾成功地将自定义属性直接附加到 CustomEvent 对象（如 event.value = 'foo'），但我不知道 TypeScript 是否会让你这样做。

如果您需要支持 IE 等旧版浏览器，请查看上面的 MDN 链接以获取 polyfill。

【讨论】：