标签：一文 自定义 dispatchEvent detail js 事件 addEventListener CustomEvent
什么是事件
我们先来看看MDN做出的解释：
事件是您在编程时系统内发生的动作或者发生的事情，系统响应事件后，如果需要，您可以某种方式对事件做出回应。
说一下自己对事件的理解：
事件是一种机制，当某些特定的行为或动作被触发，此时会自动执行其他行为。就拿我们常用的点击事件为例，当点击这一个动作发生之后，就会触发我们设置的一些行为，比如跳转页面，记录点击次数等等
为了更好的理解，对一些API的用法进行了简化，有兴趣的同学可以看文末的参考链接
如何自定义事件
目前实现自定义事件的方式共两种
- Event()
- CustomEvent()
在介绍这两种方式之前，我们还得简单了解一下另外两个方法——addEventListener和dispatchEvent
addEventListener
顾名思义，这个方法的作用就是添加事件监听
当我们生成新的事件之后，得有这个方法进行监听，系统才能知道我们有没有触发该事件
target.addEventListener(type, listener, options);
target可以是一个文档上的元素 Element,Document和Window或者任何其他支持事件的对象
type：表示我们要监听事件的名称，必选项，注意名称要和事件名称保持一致
listener：一个函数，再事件被触发之后，必选项
options：可选项，对listener的一些配置，这里用不上，知道有这个东西就行了
dispatchEvent
触发被我们定义的事件
target.dispatchEvent(event)
Event()
语法及参数
const myEvent = new Event(eventName, eventOptions);
eventName : String类型，必选项，表示事件的名称eventOptions : Object类型，事件的可选配置项
| 字段 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| bubbles | 事件是否冒泡 | Boolean | false |
| bubbles | 事件是否冒泡 | Boolean | false |
| cancelable | 事件是否能被取消 | Boolean | false |
CustomEvent()
语法及参数
const myEvent = new CustomEvent(eventName, eventOptions);
eventName : String类型，必选项，表示事件的名称eventOptions : Object类型，事件的可选配置项
| 字段 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| detail | 事件中需要被传递的数据 | Any | null |
| bubbles | 事件是否冒泡 | Boolean | false |
| cancelable | 事件是否能被取消 | Boolean | false |
用法
const sendEvent = new Event("sendMsg")
document.addEventListener("sendMsg",print)
document.dispatchEvent(sendEvent)
function print() {
console.log("内容色情低俗")
}
// result：内容色情低俗。
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可以传递数据
实际运用
事件模式本质上和观察者模式是相同的，所以凡是能够用到观察者这种模式的情形，就可以使用事件来解决
现在我们来列举一个简单的情形并实现它
情景：有一个数组arr，每当这个数组添加新的元素之后，我们都要重新打印它一次
实现
let arr = []
function add(detail) {
document.dispatchEvent(
new CustomEvent("onAdd", {
detail
})
)
}
// 监听添加事件
document.addEventListener("onAdd", (e) => {
e.detail ? arr.push(e.detail.age) : null
console.log(arr)
})
// 触发事件
add()
add({age: 18})
如果不使用这种模式，我们在数组改变之后就得手动打印数组
当然，在不需要监听这个事件之后，我们得通过removeEventListener（用法和addEventListener相同）取消对这个事件得监听
总结
其实自定义事件用到的情况超级少，毕竟Vue和react都有自己的自定义事件的方式，我们只需要直接用就是了。我也是再学习小册《Electron + React 从 0 到 1 实现简历平台实战》（阿宽打广告费！！！）看见阿宽用到自定义事件进行通信，感兴趣就去学习了一下，顺便记录下来。
参考文献
addEventListener
dispatchEvent
事件介绍
Creating and triggering events
标签：一文,自定义,dispatchEvent,detail,js,事件,addEventListener,CustomEvent 来源： https://www.cnblogs.com/konglxblog/p/16456711.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。