自定义事件 in JS

JavaScript 中的自定义事件是一种很好的方式，可以让你按照你的意愿去创建自己的事件，并且让你更加灵活地操作这些事件。

什么是自定义事件？

JavaScript 事件是用户和浏览器的交互。一旦某些事件被触发，就会调用绑定在事件上的函数。

有些事件是浏览器预定义好的，例如 click 事件，你只需要将事件绑定到指定的元素上，浏览器就会默认处理这个事件。

但是有时候，我们需要事件具有自己的特性，需要我们创建完全自定义自己的事件，这时候就需要使用自定义事件。

如何创建自定义事件？

可以通过 createEvent 方法，在 document 或 window 对象上创建自定义事件。

创建自己的事件需要有一个名称，通常是你自己定义的。

const event = new Event('my-custom-event');

这里我们创建了一个叫做 my-custom-event 的自定义事件，现在我们可以向该事件添加一些额外的属性和方法来实现我们想要的功能。

如何使用自定义事件？

创建自定义事件只是第一步，接下来你需要将事件派发到系统中。

document.dispatchEvent(event);

此时你就成功在 document 上发布了一个自定义事件。

那如果你需要更加高级的事件处理呢？我们可以为事件添加自定义属性，来让我们的事件更加灵活的运用。

const event = new CustomEvent('my-custom-event', {
  detail: {
    message: 'This is a custom event!'
  }
});
document.dispatchEvent(event);

这里，我们可以看到我们新增加了一个 name 为 detail 的属性。在事件监听的时候，可以非常方便的获取我们所设的属性值。

document.addEventListener('my-custom-event', function(event) {
  console.log(event.detail.message); // This is a custom event!
});

自定义事件的兼容性

创建自定义事件的 API 不执行任何前缀，并且作为 Web 标准的一部分实现了它们。但是，请注意，还有一些旧版的浏览器可能没有完全支持它们，比如IE10及之前的版本。如果你要兼容旧版浏览器，那建议你查看相关文档资料以确定是否提供了替代方法。

结论

JavaScript 自定义事件是一种非常强大的方法，让你可以更加灵活地操作事件，而不被限制于浏览器默认的事件。如果你拥有一些复杂的、自定义的功能，那么自定义事件无疑是你的最佳选择。