js customEvent 创建和触发自定义事件

 

在日常的 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 这样的服务。