TypeScript中已废弃的initEvent方法有什么替代方案？

基于DOM现行标准，createEvent 配套的 initEvent 方法已被正式废弃，替代方案是直接使用 MouseEvent 构造函数创建事件实例，TypeScript对该API有完整的类型支持，兼容所有现代浏览器。

等价替换原有代码 #

原有逻辑可以直接替换为以下写法，行为完全一致：

const mouseUpEvent = new MouseEvent('mouseup', {
  bubbles: true,
  cancelable: true
})

// 在目标元素上触发事件，和旧逻辑无差异
document.dispatchEvent(mouseUpEvent)

构造函数第一个参数为事件类型字符串，第二个参数为事件配置对象：

• bubbles: true 对应原initEvent第二个参数，控制事件是否冒泡
• cancelable: true 对应原initEvent第三个参数，控制事件是否可阻止默认行为

进阶配置 #

相比旧API，构造函数支持直接传入所有鼠标事件的原生属性，不需要额外调用其他初始化方法，常用配置项包括：

• clientX/clientY：事件触发时的鼠标视口坐标
• screenX/screenY：事件触发时的鼠标屏幕坐标
• button：触发事件的鼠标按键，0=左键、1=中键、2=右键
• shiftKey/ctrlKey/altKey/metaKey：触发事件时对应键盘修饰键是否处于按下状态
• view：事件关联的窗口上下文，一般传window即可

示例：模拟在坐标(200, 300)位置按下鼠标右键

const rightMouseDown = new MouseEvent('mousedown', {
  bubbles: true,
  cancelable: true,
  button: 2,
  clientX: 200,
  clientY: 300
})

废弃提示参考 #

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