在JavaScript中绑定的点击、键盘等事件，如果要触发它，需要用户手动去触发它。

今天我们将通过代码的方式来触发这些事件。

我们将会用到Event 构造函数和 element.dispatchEvent()方法。

使用代码来生成事件的步骤如下：

• 首先用Event 构造函数创建一个新的 Event 对象。
• 然后，使用 dispatchEvent() 方法触发事件。

Event 构造函数

使用Event 构造函数来创建一个新事件：

let event = new Event(type, [,options]);

Event 构造函数接受两个参数：

type

指定事件类型，比如click。

options

为对象类型，有两个属性：

• bubbles：为布尔值，表示事件是否冒泡。如果为true，则事件冒泡，反之亦然。

• cancelable：也是布尔值，表示事件是否可以取消，如果为true，则可以取消，反之亦然。

默认options对象为：

{ bubbles: false, cancelable: false}

下面我使用默认的options创建了一个点击事件

let clickEvent = new Event('click');

dispatchEvent 方法

创建完事件后，我们就可以使用dispatchEvent() 方法在目标元素上触发它，像这样

element.dispatchEvent(event);

下面我在一个页面中来测试它：

<button class="btn">测试dispatchEvent()方法</button><script>let btn = document.querySelector('.btn');btn.addEventListener('click', function () {alert('点击了');});let clickEvent = new Event('click');btn.dispatchEvent(clickEvent);
</script>

点击此处查看在线示例：

https://codepen.io/cmdfas-the-bashful/pen/JjyLJRQ

在上面的例子中，我们不用手动点击按钮就会触发事件监听程序，就像我们点击了按钮一样。

那么我们如何区分事件是由用户触发还是代码触发呢？

问的好，如果事件来自用户操作，则 event.isTrusted 属性为 true。如果事件由代码触发，则 event.isTrusted 为 false。

所以，我们可以通过判断 event.isTrusted 属性的值来确定事件是否由用户触发。

Event 是 UIEvent 的父类，UIEvent 是其他特定事件类型的父类，例如 MouseEvent、TouchEvent、FocusEvent 和 KeyboardEvent。

我们最好使用 MouseEvent 这样的详细事件构造函数而不是通用的 Event 构造函数，因为这些构造函数提供了更多特定于事件的信息。

例如，MouseEvent 事件有许多其他属性，例如 clientX 和 clientY，它们指定事件发生时相对于视口的水平和垂直坐标：

let clickEvent = new MouseEvent("click", {bubbles: true,cancelable: true,clientX: 150,clientY: 150
});

下面链接展示了MouseEvent的全部属性：

https://www.w3.org/TR/uievents/#idl-mouseevent

总结

• 我可以使用特定的事件构造函数（例如 MouseEvent）并在元素上调用 dispatchEvent() 方式手动触发事件。

• 通过使用 event.isTrusted 判断事件是由代码还是用户触发。

一起学习更多前端知识，微信搜索【小帅的编程笔记】，每天更新