字数
523 字
阅读时间
3 分钟
概述
事件是您在编程时系统内发生的动作或者发生的事情，系统响应事件后，如果需要，您可以某种方式对事件做出回应。
如何自定义事件
目前实现自定义事件的方式共两种
- Event()
- CustomEvent()
Event()
javascript
const myEvent = new Event(eventName, eventOptions);eventName : String 类型，必选项，表示事件的名称
eventOptions : Object 类型，事件的可选配置项
用法
js
const sendEvent = new Event("sendMsg")
document.addEventListener("sendMsg",print)
document.dispatchEvent(sendEvent)
function print() {
console.log("内容色情低俗")
}
// result：内容色情低俗。CustomEvent()
javascript
const myEvent = new CustomEvent(eventName, eventOptions);eventName : String 类型，必选项，表示事件的名称
eventOptions : Object 类型，事件的可选配置项
用法
javascript
const sendEvent = new CustomEvent("sendMsg", {detail:{
name: "mayoha"
}})
document.addEventListener("sendMsg",print)
document.dispatchEvent(sendEvent)
function print(e) {
console.log(e.detail.name)
}区别
通过上面两个简单的例子我们可以看出，Event 和 CustomEvent 最大的区别在于，CustomEvent 可以传递数据
此外，我们还得简单了解一下另外操作事件的两个方法——addEventListener 和 dispatchEvent
对事件的操作
addEventListener
顾名思义，这个方法的作用就是添加事件监听
当我们生成新的事件之后，得有这个方法进行监听，系统才能知道我们有没有触发该事件
javascript
target.addEventListener(type, listener, options);target 可以是一个文档上的元素 Element,Document 和 Window 或者任何其他支持事件的对象
type：表示我们要监听事件的名称，必选项，注意名称要和事件名称保持一致
listener：一个函数，再事件被触发之后，必选项
options：可选项，对 listener 的一些配置，这里用不上，知道有这个东西就行了
dispatchEvent
触发被我们定义的事件
javascript
target.dispatchEvent(event)target 同上
event：要被派发的事件对象
参考
Creating and triggering events - Event reference | MDN
贡献者
jiechen