在日常的 Web 开发中，我们经常与内置的浏览器事件互动，例如 click、input 和 submit。但有时，我们可能希望在特定情境下创建并触发自己的事件。这时，CustomEvent 就派上了用场。
基本用法
// 使用 new CustomEvent 创建一个自定义事件
const myEvent = new CustomEvent('myCustomEvent', {
message: 'hello'
});
// 这里，'myCustomEvent' 是你的自定义事件名称，
// 而 'detail' 属性则包含你想传递给事件监听器的额外数据。
// 使用 dispatchEvent 方法触发自定义事件
document.dispatchEvent(myEvent);
document.addEventListener('myCustomEvent', function(e) {
console.log(e.message); // 输出: "hello"
});
浏览器兼容
CustomEvent 的兼容性 虽然 CustomEvent 在大多数现代浏览器中都得到了很好的支持，但在某些旧版本的浏览器中，例如 Internet Explorer，可能需要一些额外的处理来支持这个功能。
CustomEvent 构造函数在主流现代浏览器中是兼容的：
Chrome: 自 Chrome 15 版本开始支持。
Firefox: 自 Firefox 6 版本开始支持。
Safari: 自 Safari 6 版本开始支持。
Edge: 自 Edge 12 版本开始支持。
Internet Explorer: 不支持 CustomEvent 构造函数。但可以通过使用其他方法模拟自定义事件，或者使用一些 polyfill 库来提供支持。
处理兼容 CustomEvent polyfill
// 为那些不支持 CustomEvent 构造函数的浏览器添加一个简单的 polyfill
(function () {
if (typeof window.CustomEvent === "function") return false;
function CustomEvent(event, params) {
params = params || { bubbles: false, cancelable: false, detail: null };
var evt = document.createEvent('CustomEvent');
evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
return evt;
}
CustomEvent.prototype = window.Event.prototype;
window.CustomEvent = CustomEvent;
})();
如果你想要更全面的解决方案，可以考虑使用像 polyfill.io 这样的服务。