JS 中的自定义事件和模拟事件
在 JS 中模拟事件指的是模拟 JS 中定义的一些事件，例如点击事件，键盘事件等。
自定义事件指的是创建一个自定义的，JS 中之前没有的事件。
接下来分别说一下创建这两种事件的方法。
创建自定义事件
创建自定义事件可以使用 Event 和 CustomEvent 两种方法，接下来分别做一下介绍。
1. 利用 Event
Event 用法
event = new Event(typeArg, eventInit);
typeArg：指定事件类型，传递一个字符串。这里的事件类型指的是像点击事件（click）、提交事件（submit）、加载事件（load）等等。
eventInit：可选，也可以以键值对的形式设置以下属性。
bubbles：事件是否支持冒泡，传递一个boolean类型的参数，默认值为false。
cancelable：是否可取消事件的默认行为，传递一个boolean类型的参数，默认值为false。
composed：事件是否会触发shadow DOM（阴影DOM）根节点之外的事件监听器，传递一个boolean类型的参数，默认值为false。
示例
<section id="Event">
<div id="root"></div>
<script type="text/javascript">
// 创建事件对象
const newEvent = new Event('customType', { bubbles:true,cancelable:true,composed:true })
// 获取 DOM 元素
const div = document.getElementById('root')
// 绑定事件对象
document.addEventListener('customType', () => {
alert('自定式 customType 事件执行了')
})
// 触发事件对象(真正开发中可以满足某个条件后才触发事件)
div.dispatchEvent(newEvent)
</script>
</section>
2. 利用 CustomEvent
CustomEvent() 可以像 Event() 那样使用，但它也可以在 Web Workers 中使用（与主线程分离的另一个线程），可以传递跟事件关联的相关值（detail），detail 的默认值为null，类型为any（也就是说可以传递任意类型的参数），这个值就是和事件相关联的值。
通过示例可以很明白地看出来两者的区别。
<section id="CustomEvent">
<div id="root"></div>
<script type="text/javascript">
// 创建事件对象
const newEvent = new CustomEvent('customType', {
bubbles:true,
cancelable:true,
composed:true,
detail: {
log: '我是 detail 属性中的'
}
})
// 获取 DOM 元素
const div = document.getElementById('root')
// 绑定事件对象
document.addEventListener('customType', () => {
// 打印 event.detail.log 的值
alert(`自定式 customType 事件执行了,${event.detail.log}`)
})
// 触发事件对象(真正开发中可以满足某个条件后才触发事件)
div.dispatchEvent(newEvent)
</script>
</section>
可以看到在 event 对象中会有 detail 属性，我们可以输出 detail 属性中的内容。
创建模拟事件
想要模拟用户的点击等行为，可以通过模拟事件来实现。
步骤：
1）在 document 对象上使用 createEvent() 方法创建 event 对象，这个方法接收一个创建类型的字符串，主要有下面四种。
- UIevents：一般化的 UI 事件，鼠标和键盘事件都继承自 UI 事件，DOM3 中是 UIEvent。
- MouseEvents：鼠标事件，DOM3 中是 MouseEvent。
- MutationEvents：DOM 变动事件，DOM3 中是 MutationEvent。
- HTMLEvents：HTML 事件。
使
2）初始化事件对象
在使用 document.createEvent() 创建出一个 event 对象之后，event 对象上会得到一个初始化的属性，不同类型的 Event 对象属性名不同，例如 MouseEvent 类型对应的属性就是 initMouseEvent .
3）触发事件
在实际开发中当满足一定条件后我们可以使用 DOM元素.dispatchEvent(event) 来触发事件。
接下来以模拟鼠标点击事件为例，说明一下上面的各个步骤。定义了一个 div 元素，绑定了一个 click 事件处理程序，内容是 alert('我不是用户点击的')，然后再模拟触发 click 事件，可以发现即使在用户不点击时也可以弹出 '我不是用户点击的'.
<section id="SimulateEvent">
<div id="root"></div>
<script type="text/javascript">
// 获取 DOM 元素
const div = document.getElementById('root')
// 绑定事件处理程序
div.addEventListener('click', () => {
alert('我不是用户点击的')
}, false)
// 创建鼠标事件对象
const event = document.createEvent('MouseEvents')
// 初始化事件对象
event.initMouseEvent('click', true, true, document.defaultView)
// 触发事件对象(真正开发中可以满足某个条件后才触发事件)
div.dispatchEvent(event)
</script>
</section>
从上面的结果可以看到，即使我们没有点击 div 元素，它也会执行绑定的 click 的事件处理程序，原因就在于我们通过程序模拟了点击事件。