前言
经想必大家对于JS当中的事件并不陌生了。我们通过html或dom的方式指定某个事件的处理程序，然后当某个特定的场景（如点击、聚焦、输入等）发生时在触发这些处理程序。每当这个时候我就在想能否有办法可以定制一个事件，又或是摆脱特定场景的桎梏，能够自由的触发一个事件。想要实现这些效果就需要跳到另一个角度去看JS当中的事件。
1.JS事件的本质
JS中事件的本质其实就是一个对象，因此不同类型的事件就对应了不同的类，例如click事件源自 MouseEvent类，键盘事件源自KeyboardEvent类，聚焦事件源自FocusEvent类。而上述的这些类型追本溯源又都继承自Event类。因此通过Event类，或者它的派生类，我们就可以自己通过编程的方式创建一个事件。
所有的事件类都接收两个参数：typeArg和eventinit。
typeArg用于指定事件名称eventinit可选，它是一个用于指定事件的相关信息的集合，这些信息会在 事件处理程序的event对象中体现出来。注意不同事件类型的eventinit集合 中所接收的字段不同，请查阅相关文档。
那么此时我就已经可以自己创建一个click事件：
const myClickEvent = new MouseEvent('click',{
bubbles:true,//是否冒泡
cancelable:true,//是否可取消
clientX:10,//事件触发时鼠标在浏览器窗口中的位置
clientY:20,
})2.事件派发
现在我们已经能够自己创建一个事件，但仅仅如此还不能实现事件模拟，因为我们创建的事件还无法使用。想要使用事件，就要通过EventTarget.dispatchEvent()方法进行事件派发。
EventTarget是事件目标类型，它有三个方法addEventListener、removeEventListener和dispatchEvent。所有可能的事件目标，例如 Element、document、window，都会实现这三个方法。
因此我们就可以使用dispatchEvent()方法将之前创建的click事件派发给某个元素。
document.getElementById('eventButton').dispatchEvent(myClickEvent)3.事件模拟
有了上两节的知识，此时我们就可以实现事件模拟了：
<!DOCTYPE html>
<html lang="en">
<body>
<button id="eventButton">事件按钮</button>
<script>
const eventButton = document.getElementById('eventButton')
// 监听事件
eventButton.addEventListener('click', function (event) {
console.log('event', event)
console.log('this', this)
})
// 创建一个点击事件
const myClickEvent = new MouseEvent('click', {
bubbles: true, //是否冒泡
cancelable: true, //是否可取消
clientX: 10, //事件触发时鼠标在浏览器窗口中的位置
clientY: 20,
})
// 派发创建的点击事件
eventButton.dispatchEvent(myClickEvent)
</script>
</body>
</html>上面的代码中，无需点击按钮即可自动触发它的点击事件。
并且事件对象中的clientX、clientY属性，正是我们创建点击事件时所设置的值
4.自定义事件
在前面我们实现了模拟事件，那么如果我们不是想模拟一个现有的事件，而是想创建一个自定义的事件又应该如何实现呢？
可以使用Event类来创建自定义事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
button {
width: 80px;
height: 30px;
}
div {
width: 500px;
height: 500px;
background-color: red;
visibility: hidden;
}
</style>
</head>
<button onclick="handleClick()">显示元素</button>
<div id="element1"></div>
<body>
<script>
const div = document.getElementById('element1')
//监听show事件
div.addEventListener('show', (e) => {
alert(`元素${e.target.id}显示成功`)
})
//创建一个show事件
const myEvent = new Event('show')
//当点击按钮时,显示div元素,并触发其show事件
function handleClick() {
div.style.visibility = 'visible'
div.dispatchEvent(myEvent)
}
</script>
</body>
</html>在上面的代码中我创建了一个自定义的show事件，当点击按钮时就会显示元素div并触发div的show事件。
如果想要给事件对象添加自定义的数据，那就可以利用CustomEvent类型来创建自定义事件。CustomEvent是专门的自定义事件类型，它的eventinit参数中有一个字段detail可以让我们用于传递数据。
const myEvent = new CustomEvent('transfer',{
detail:'机密数据'
})
window.addEventListener('transfer',(event)=>{
console.log(event.detail);
})
window.dispatchEvent(myEvent)
参考资料
- Event - Web API 接口参考 | MDN
- CustomEvent：CustomEvent() 构造函数 - Web API 接口参考 | MDN
- 创建和触发事件 - 事件参考 | MDN
