创建自定义事件

一起看海

我们不仅可以分配事件处理程序，还可以从 JavaScript 生成事件。

自定义事件可用于创建“图形组件”。例如，我们自己的基于 JavaScript 的菜单的根元素可能会触发 open（打开菜单），select（有一项被选中）等事件来告诉菜单发生了什么。另一个代码可能会监听事件，并观察菜单发生了什么。

我们不仅可以生成出于自身目的而创建的全新事件，还可以生成例如 click 和 mousedown 等内建事件。这可能会有助于自动化测试。

事件构造器
内建事件类形成一个层次结构（hierarchy），类似于 DOM 元素类。根是内建的 Event 类。

我们可以像这样创建 Event 对象：

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

type —— 事件类型，可以是像这样 "click" 的字符串，或者我们自己的像这样 "my-event" 的参数。

options —— 具有两个可选属性的对象：

bubbles: true/false —— 如果为 true，那么事件会冒泡。
cancelable: true/false —— 如果为 true，那么“默认行为”就会被阻止。稍后我们会看到对于自定义事件，它意味着什么。
默认情况下，以上两者都为 false：{bubbles: false, cancelable: false}。

dispatchEvent
事件对象被创建后，我们应该使用 elem.dispatchEvent(event) 调用在元素上“运行”它。

然后，处理程序会对它做出反应，就好像它是一个常规的浏览器事件一样。如果事件是用 bubbles 标志创建的，那么它会冒泡。

在下面这个示例中，click 事件是用 JavaScript 初始化创建的。处理程序工作方式和点击按钮的方式相同：

<button id="elem">Autoclick</button>

<script>
  let event = new Event("click");
  elem.dispatchEvent(event);
</script>
event.isTrusted
有一种方法可以区分“真实”用户事件和通过脚本生成的事件。

对于来自真实用户操作的事件，event.isTrusted 属性为 true，对于脚本生成的事件，event.isTrusted 属性为 false。