其他分享
首页 > 其他分享> > 一文带你掌握js自定义事件

一文带你掌握js自定义事件

作者:互联网

什么是事件

我们先来看看MDN做出的解释:

事件是您在编程时系统内发生的动作或者发生的事情,系统响应事件后,如果需要,您可以某种方式对事件做出回应。

说一下自己对事件的理解:
事件是一种机制,当某些特定的行为或动作被触发,此时会自动执行其他行为。就拿我们常用的点击事件为例,当点击这一个动作发生之后,就会触发我们设置的一些行为,比如跳转页面,记录点击次数等等

为了更好的理解,对一些API的用法进行了简化,有兴趣的同学可以看文末的参考链接

如何自定义事件

目前实现自定义事件的方式共两种

在介绍这两种方式之前,我们还得简单了解一下另外两个方法——addEventListenerdispatchEvent

addEventListener

顾名思义,这个方法的作用就是添加事件监听
当我们生成新的事件之后,得有这个方法进行监听,系统才能知道我们有没有触发该事件

target.addEventListener(type, listener, options);

target可以是一个文档上的元素 Element,DocumentWindow或者任何其他支持事件的对象
type:表示我们要监听事件的名称,必选项,注意名称要和事件名称保持一致
listener:一个函数,再事件被触发之后,必选项

options:可选项,对listener的一些配置,这里用不上,知道有这个东西就行了

dispatchEvent

触发被我们定义的事件

target.dispatchEvent(event)

target同上
event:要被派发的事件对象

Event()

语法及参数

const myEvent = new Event(eventName, eventOptions);

eventName : String类型,必选项,表示事件的名称
eventOptions : Object类型,事件的可选配置项

字段说明类型默认值
bubbles事件是否冒泡Booleanfalse
bubbles事件是否冒泡Booleanfalse
cancelable事件是否能被取消Booleanfalse

CustomEvent()

语法及参数

const myEvent = new CustomEvent(eventName, eventOptions);

eventName : String类型,必选项,表示事件的名称
eventOptions : Object类型,事件的可选配置项

字段说明类型默认值
detail事件中需要被传递的数据Anynull
bubbles事件是否冒泡Booleanfalse
cancelable事件是否能被取消Booleanfalse

用法

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

来源:https://juejin.cn/post/6990156087726964766

标签:一文,自定义,dispatchEvent,detail,js,事件,addEventListener,CustomEvent
来源: https://www.cnblogs.com/konglxblog/p/16456711.html