一文带你掌握js自定义事件
什么是事件
我们先来看看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
相关文章
- require.js使用
- jQuery 追加元素、拼接元素的方法总结(append、html、insertBefore、before等) 初识document.onkeydown及其兼容性问题 js学习笔记27----键盘事件 JavaScript onkeydown事件入门实例(键盘某个按键被按下)
- 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法(转载) IEnumerable,ICollection,IList接口问题 不吹不擂,你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理
- js时间差转为天数
- 爬虫之js有道翻译
- js 自定义事件 包含 添加、激活、销毁
- 29dwr - engine.js 功能(选项索引)
- Vue - 超详细网站接入腾讯地图的完整流程,提供地图显示、IP 属地定位、地理位置名称、获取经纬度等超多功能示例(可一键复制并运行的功能源代码,详细的注释及常见问题汇总)Nuxt.js 也能用!
- JS Leetcode 530. 二叉搜索树的最小绝对差 题解分析,再次了解中序遍历
- js 获取中文的拼音
- js 温故而知新 webkitTransitionEnd 监听Transition动画结束事件
- js之事件冒泡和事件捕获详细介绍
- js实例分析JavaScript中的事件委托和事件绑定
- JS高阶---执行上下文
- JS键盘事件获取键盘码
- js字母转换成数字
- 【零基础学JS -7】Javascript中的数字
- [js高手之路] vue系列教程 - vue的事件绑定与方法(2)
- js事件委托及其原理
- JS中的单线程与多线程、事件循环与消息队列、宏任务与微任务
- 浅析HTML5点播m3u8(hls)格式视频和flv.js播放flv视频流
- D3.js系列——布局:饼状图和力导向图
- vue.js 使用 fastclick解决移动端click事件300毫秒延迟方法
- JS魔法堂:定义页面的Dispose方法——[before]unload事件启示录
- js阻止事件冒泡和标签默认行为
- Three 之 three.js (webgl)CSS2DObject 添加文字按钮等并与OrbitController / html button 等交互冲突的简单使用说明整理
- JS学习第4天——Web API之DOM(事件高级)【注册/删除事件、DOM事件流、阻止事件冒泡、事件委托、常用的鼠标/键盘事件】
- vue.js 样式绑定 font-size 问题
- 原生js实现元素类名的判存、添加和移除
- JQuery/JS插件 jsTree checkbox选中事件 和 节点选中事件 分离版