如何用js代码触发dom事件-创新互联

这篇文章主要为大家展示了如何用js代码触发dom事件，内容简而易懂，希望大家可以学习一下，学习完之后肯定会有收获的，下面让小编带大家一起来看看吧。

背景

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

思路

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

实现方法

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

• 创建要触发的事件实例
• 获取要触发事件的元素对象
• 调用元素对象的dispatchEvent方法，参数是目标事件实例
• 特殊事件要分析一下模拟方式，巧妙的实现

首先，创建事件实例

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

通过构造函数MouseEvent(typeArg, mouseEventInit),可以生成一个新的MouseEvent对象。该构造函数接受两个参数，第一个参数为typeArg，用于指定事件的名称，一般都是一个字符串。第二个参数为mouseEventInit，可以初始化 MouseEvent的字典，也就是指定一些该事件的属性值，比如鼠标事件常见的screenX、screenY、clientX、clientY等属性，同时，由于MouseEvent是继承于UIEvent，UIEvent又继承于Event，所以mouseEventInit可以包含UIEventInit和EventInit中的属性。

总结一行代码就是：

const mouseEvent = new MouseEvent(typeArg, mouseEventInit);