html5 自动触发事件,用js代码触发dom事件的实现方案

背景

前端编写测试用例时，在测试界面上的一些效果时，通常都希望能够模拟一些用户操作，而模拟用户操作最主要的方式就是用代码触发指定事件。通常一些元素上会自带一些触发事件的方法，例如click、focus等，但是如果是其他的事件，例如mousedown、mouseup、mouseenter，这些事件怎么模拟呢？

思路

其实思路很简单，web标准中定义了一系列API接口，其中dispatchEvent允许我们向一个指定的事件目标派发一个事件，而且使用这个方法触发的事件是可以正常触发我们的标准事件处理规则的(包括事件捕获和可选的冒泡过程)，那么这就非常强大了，我们可以基于此做很多事情了。

实现方法

大致流程相信大家都已经想到了，无外乎以下几步操作：

创建要触发的事件实例

获取要触发事件的元素对象

调用元素对象的dispatchEvent方法，参数是目标事件实例

特殊事件要分析一下模拟方式，巧妙的实现

首先，创建事件实例

web标准提供了MouseEvent 接口，专指用户与指针设备( 如鼠标 )交互时发生的事件。使用此接口的常见事件包括：click、dblclick 、mouseup、mousedown。

通过构造函数MouseEvent(typeArg, mouseEventInit),可以生成一个新的MouseEvent对象。该构造函数接受两个参数，第一个参数为typeArg，用于指定事件的名称，一般都是一个字符串。第二个参数为mouseEventInit，可以初始化 MouseEvent的字典，也就是指定一些该事件的属性值，比如鼠