JavaScript中如何替换已废弃的CustomEvent.initCustomEvent()方法？

完全可以使用标准的CustomEvent()构造函数替代已废弃的initCustomEvent()方法，改造成本极低。

新旧写法对比 #

旧的废弃写法 #

旧方案需要先创建空事件实例，再调用初始化方法，参数顺序固定容易写错：

// 已废弃的写法
const customEvent = document.createEvent('CustomEvent');
// 四个参数依次为：事件名、是否冒泡、是否可取消、自定义数据
customEvent.initCustomEvent('user-login', true, true, { userId: 123, userName: '张三' });

新的标准写法 #

直接通过构造函数创建实例，配置项语义化更强，无需记忆参数顺序：

// 现行标准写法
const customEvent = new CustomEvent('user-login', {
  bubbles: true, // 对应原init方法第二个参数
  cancelable: true, // 对应原init方法第三个参数
  detail: { userId: 123, userName: '张三' } // 对应原init方法第四个参数，存放自定义数据
});

改造注意事项 #

• 事件触发逻辑不需要修改，依旧可以通过element.dispatchEvent(customEvent)触发事件，原有绑定的事件监听逻辑也完全兼容
• 该构造函数兼容所有现代浏览器（Chrome、Firefox、Safari、Edge全版本支持），仅IE11及更低版本IE浏览器不支持，若需要兼容低版本IE可以自行引入对应polyfill
• 新写法符合DOM最新标准，无后续被废弃的风险，代码可维护性更强

内容的提问来源于stack exchange，提问作者rj26