如何编程式触发DOM元素hover事件？调用onmouseover报缺参错

HTMLElement.onmouseover 在TypeScript中的类型定义为 ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null，强制要求调用时传入MouseEvent类型的事件参数，空参调用会直接触发类型校验错误。
另外直接手动调用onmouseover()不属于DOM标准的事件触发方式，仅能触发通过onmouseover属性绑定的回调，无法触发通过addEventListener注册的同类型事件，容易出现逻辑遗漏。

• 方案1：手动构造MouseEvent参数传入（适配直接调用属性回调的场景）
  直接实例化一个MouseEvent对象作为入参传入即可，同时加可选链避免未绑定回调时的运行时错误：

  triggerFalseHover() {
    const htmlElement: HTMLElement = this.kendoButton.nativeElement;
    // 构造mouseover事件实例，可按需补充坐标、关联元素等配置
    const event = new MouseEvent('mouseover', {
      bubbles: true,
      cancelable: true
    });
    htmlElement.onmouseover?.(event);
  }
  

• 方案2：通过标准事件派发触发（推荐，和真实用户操作触发逻辑一致）
  使用DOM标准的dispatchEvent方法派发事件，无论通过onmouseover属性还是addEventListener绑定的回调都能被正常触发，逻辑更完整：

  triggerFalseHover() {
    const htmlElement: HTMLElement = this.kendoButton.nativeElement;
    const event = new MouseEvent('mouseover', {
      bubbles: true,
      cancelable: true,
      view: window
    });
    htmlElement.dispatchEvent(event);
  }
  

• 上述两种方式触发的都是JS层面的mouseover事件，不会触发元素CSS :hover伪类的样式，如果需要模拟hover视觉效果，需要额外给元素添加对应样式类来实现。
• 构造MouseEvent时可按需传入clientX、clientY、relatedTarget等参数，模拟更贴近真实操作的事件场景。

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