在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判断事件是由代码还是用户触发。
一起学习更多前端知识，微信搜索【小帅的编程笔记】，每天更新