Node——事件的监听与触发

news2024/11/24 11:46:28

Node.js是由事件驱动的,每个任务都可以当作一个事件来处理,本贴将对Node.js中的events模块及其中处理事件的类EventEmitter的使用进行详细讲解。
在这里插入图片描述

1、EventEmitter对象

在JavaScript中,通过事件可以处理许多用户的交互,比如鼠标的单击、键盘按键的按下、对鼠标移动的反应等。在Node.js中也提供了类似的事件驱动,主要是通过events模块实现的,该模块中提供了EventEmitter类,用于处理事件。要使用EventEmitter类处理事件,首先需要对其进行初始化,代码如下:

EventEmitter = require('events')
eventEmitter = new EventEmitter()

在Node.js中,可以添加监听事件的对象都是继承自EventEmitter对象,后者提供了用于处理Node.js事件的方法,常用方法及说明如下表所示:
在这里插入图片描述
说明
EventEmitter对象的addListener()方法和on()方法都用来添加监听事件,它们的使用是等效的,实际上,on方法在内部实现时调用了addListener()方法。Node.js中推荐使用on()方法添加监听事件。

使用EventEmitter对象创建简单事件,在WebStorm中创建一个.js文件,其中创建一个EventEmitter对象,并使用其on方法添加监听事件,在监听事件中输出一个日志信息,然后使用emit()方法触发该监听事件。代码如下:

//引入events模块
var events = require('events');
//生成EventEmitter对象
var custom = new events.EventEmitter();
//添加监听事件tick
custom.on('tick', function (code) {
     console.log('执行指定事件!');
});
//主动触发监听事件tick
custom.emit('tick');

运行程序,效果如下图所示:
在这里插入图片描述
上面的代码中,使用EventEmitter对象添加监听事件和触发监听事件的代码都放在了一个文件中,但实际应用时,通常会把添加监听事件的模块和触发监听事件的模块分开,如下图所示就是一种常用的实现Node.js监听事件的文件构成方式。其中,app.js文件中添加相关监听事件,rint.js文件中触发相关监听事件。
在这里插入图片描述
演示项目中监听事件的添加与触发,程序开发步骤如下:
(1)在WebStorm中创建一个rint.js文件,该文件中使用EventEmitter对象的emit()方法每隔1秒触发一次tick事件,代码如下:

//定义变量,用来记录执行次数
num=0
//引入events模块
var events = require('events');
//生成 EventEmitter 对象
exports.timer = new events.EventEmitter();
//触发监听事件tick
setInterval(function () {
     num+=1
     exports.timer.emit('tick',num);
}, 1000);

(2)创建一个app.js文件,为rint模块添加具体的tick事件,该事件中输出一个日志信息,代码如下:

//引入rint模块
var rint = require('./rint.js');
//添加监听事件
rint.timer.on('tick', function (code) {
     console.log(`执行第 ${code} 次监听事件`);
});

运行app.js文件,效果如下图所示:
在这里插入图片描述

2、添加和触发监听事件

前面我们演示了如何在Node.js中添加监听事件和触发监听事件,主要用到的是EventEmitter对象的on方法和emit方法,下面对这两个方法及其使用进行详细讲解。

2.1、 添加监听事件

通过上面的学习,我们已经知道,在Node.js中添加监听事件使用的是EventEmitter对象的on方法,该方法主要用来将回调函数添加到名为eventName的事件监听器数组的末尾,其语法格式如下:

on(eventName,listener)
  • eventName:一个字符串,表示事件名称。
  • listener:回调函数。

在使用on方法向事件监听器数组中添加函数时,不会检查其是否已被添加,如果多次调用并传入相同的eventName与listener,会导致listener被重复添加多次。例如,下面代码会为tick事件添加3次同样的输出日志函数:

//引入events模块
var events = require('events');
//生成EventEmitter对象
var custom = new events.EventEmitter();
//添加监听事件tick
custom.on('tick', function () {
     console.log('第1次添加!');
});
custom.on('tick', function () {
     console.log('第2次添加!');
});
custom.on('tick', function () {
     console.log('第3次添加!');
});
//主动触发监听事件tick
custom.emit('tick');

执行上面代码时,默认运行结果如下:

1次添加!
第2次添加!
第3次添加!

从上面的运行结果可以看出,在默认情况下,事件监听器会按照添加的顺序依次调用,但如果想要改变添加顺序,该怎么办呢?EventEmitter对象提供了一个prependListener方法,该方法可以将事件回调函数添加到监听器数组的开头,其语法如下:

prependListener(eventName, listener)
  • eventName:一个字符串,表示事件名称。
  • listener:回调函数。

例如,将上面的代码修改如下:

//引入events模块
var events = require('events');
//生成EventEmitter对象
var custom = new events.EventEmitter();
//添加监听事件tick
custom.on('tick', function () {
     console.log('第1次添加!');
});
//将回调函数添加到事件监听器数组的开头
custom.prependListener('tick', function () {
     console.log('第2次添加!');
});
custom.on('tick', function () {
     console.log('第3次添加!');
});
//主动触发监听事件tick
custom.emit('tick');

运行结果会变成下面这样:

2次添加!
第1次添加!
第3次添加!

另外,需要注意的是,在上面的示例中,我们可以为同一个事件添加多个回调函数,但如果添加的回调函数超过10个,则会出现如下图所示的警告提示:
在这里插入图片描述
通过观察上图可以看到,如果为同一个事件添加的回调函数超过了10个,程序可以正常运行,但会在运行完之后出现警告提示,如何避免该警告呢?EventEmitter对象提供了一个setMaxListeners方法,该方法用来设置可以监听的最大回调函数数量,其语法格式如下:

setMaxListeners(limit)
  • limit:一个数字,用来表示可以监听的最大回调函数数量。

例如,将监听器可以监听的最大回调函数数量设置为15个,代码如下:

custom.setMaxListeners(15)

2.2、添加单次监听事件

使用前面介绍的on方法添加事件时,事件一旦添加就会一直存在,但如果遇到只想执行一次监听事件的情况,使用on方法就无能为力了,这时可以使用EventEmitter对象的once方法,该方法用来将单次监听器listener添加到名为eventName的事件,当eventName事件下次触发时,监听器会先被移除,然后再调用。once方法的语法格式如下:

once(eventName,listener)
  • eventName:一个字符串,表示事件名称。
  • listener:回调函数。

使用once方法添加单次监听事件:在WebStorm中创建一个index.js文件,其中使用EventEmitter对象的once方法为监听事件绑定一个回调函数,然后使用emit方法触发该监听事件,在触发时,设置每秒触发一次,代码如下:

//引入events模块
var events = require('events');
//生成EventEmitter对象
var custom = new events.EventEmitter();
function onUncaughtException(error) {
     //输出异常内容
     console.log('发生异常,请多加小心 !');
}
//添加监听事件event
custom.once('event', onUncaughtException);
//主动触发监听事件event
setInterval(function () {
     custom.emit('event');
}, 1000);

运行程序,效果如下图所示:
在这里插入图片描述
说明
上图中,使用once方法添加监听事件后,每隔一秒触发一次该事件,但只执行了一次。但是,如果将代码中第10行的once修改为on,则运行结果会变成每隔一秒输出一次日志。

2.3、触发监听事件

当对指定对象添加监听事件后,需要触发添加的监听事件,这时需要使用EventEmitter对象的emit方法,其语法格式如下:

emit(eventName[, ...args])
  • eventName:一个字符串,表示要触发的事件名称。
  • args:回调函数中需要的参数。
  • 返回值:布尔值,表示是否成功触发事件。

使用emit方法触发事件:在WebStorm中创建一个index.js文件,其中使用EventEmitter对象的on方法为监听事件绑定一个回调函数,然后使用emit方法触发该监听事件,代码如下:

//引入events模块
var events = require('events');
//生成EventEmitter对象
var custom = new events.EventEmitter();
//添加监听事件event
custom.on('event', function listener() {
     console.log('触发监听事件!');
});
//主动触发监听事件event
custom.emit('event');

运行程序,效果如下:

触发监听事件!

上面为事件添加的回调函数没有参数,但在实际开发中,可能需要定义带参数的回调函数,这时使用emit方法触发监听事件时,传入相应个数的参数即可。

触发带参数的监听事件:在WebStorm中创建一个index.js文件,其中使用EventEmitter对象的on方法为监听事件绑定两个回调函数,第一个回调函数有一个参数,第二个回调函数的参数为不定长参数,然后使用emit方法触发该监听事件,代码如下:

//引入events模块
var events = require('events');
//生成EventEmitter对象
var custom = new events.EventEmitter();
//添加监听事件event
custom.on('event', function listener1(arg) {
     console.log(`第 1 个监听器中的事件有参数 ${arg}`);
});
//添加监听事件event
custom.on('event', function listener1(...args) {
     parameters = args.join(', ');                              //连接参数
     console.log(`第 2 个监听器中的事件有参数 ${parameters}`);
});
//主动触发监听事件event
custom.emit('event', 1, '明日','年龄:30','爱好:编程');

运行程序,效果如下图所示:
在这里插入图片描述
从上图可以看出,由于在第一个event事件中定义的回调函数中只有一个参数arg,因此在触发时,即使传入了多个值,其也只输入第一个值;在第二个event事件定义的回调函数中,由于使用了“…args”进行定义,这表示它是一个不定长参数,因此在触发时,会根据传入参数的个数输出相应的内容。

3、删除监听事件

前面已经学习了如何添加及触发监听事件,如果添加的监听事件不需要了,可以将它删除。删除监听事件的方法如下:

  • removeListener(eventName,listener):删除指定名称的监听事件。
  • removeAllListeners([eventName]):删除全部监听事件。

下面通过一个实例来演示如何使用Node.js中删除监听事件的方法。将要添加到监听事件的回调函数单独定义,并添加到event监听事件并触发;在触发监听事件后,使用removeListener方法删除该监听事件,并通过输出删除前后的监听事件名称进行对比。代码如下:

//引入events模块
var events = require('events');
//生成EventEmitter对象
var custom = new events.EventEmitter();
function listener() {
     console.log('触发监听事件!');
}
//添加监听事件event
custom.on('event', listener);
//主动触发监听事件event
custom.emit('event');
console.log(custom.eventNames());            //输出删除前的监听事件名称
custom.removeListener('event',listener) ;    //删除event事件
console.log(custom.eventNames());            //输出删除后的监听事件名称

说明
在EventEmitter中还提供了off(eventName, listener)方法,该方法实际上相当于removeListener方法的别名,也可以删除指定名称的监听事件,其使用方法与removeListener完全一样。运行程序,效果如下图所示:
在这里插入图片描述
在使用removeListener方法删除监听事件时,如果同一个事件监听器被多次添加到指定eventName的监听器数组中,则必须多次调用removeListener方法才能删除所有事件。例如:

//引入events模块
var events = require('events');
//生成EventEmitter对象
var custom = new events.EventEmitter();
function listener() {
     console.log('触发监听事件!');
}
//添加监听事件event
custom.on('event', listener);
/*多次添加同一个事件*/
custom.on('event', listener);
custom.on('event', listener);
custom.on('event', listener);
//主动触发监听事件event
custom.emit('event');
console.log(custom.eventNames());         //输出删除前的监听事件名称
custom.removeListener('event',listener);  //删除event事件
console.log(custom.eventNames());         //输出删除后的监听事件名称

上面代码中为event事件添加了4次listener回调函数,但只使用removeListener删除了一次event事件,运行结果如下图所示:
在这里插入图片描述
观察上图可以看出,删除前后,event事件都存在,说明使用removeListener并没有完全删除多次添加的event事件。这时,如果想要完全删除event事件,可以使用removeListener方法删除4次,也可以直接使用removeAllListeners删除所有的监听事件,代码如下:

custom.removeAllListeners('event');  //删除所有event事件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1258147.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

定制网站软件app对企业的优势有哪些?|小程序搭建

定制网站软件app对企业的优势有哪些?|小程序搭建 定制网站软件和App对企业来说有许多优势。本文将探讨其中的一些重要优势。 首先,定制网站软件和App能够为企业提供个性化的解决方案。通过定制开发,企业可以根据自身的需求和目标来设计和构建…

【23真题】罕见211!数一配英二!

今天分享的是23年合肥工业大学833的信号与系统数字信号处理试题及解析。合工大833考数一英二,这样的搭配还是很少见的。 本套试卷难度分析:22年合肥工业大学833考研真题,我也发布过,若有需要,戳这里自取!平均分为80和…

操作指南 | 如何使用API3请求链下数据

API3是一种去中心化解决方案,用于向智能合约平台提供传统且可扩展的API服务,使开发者能够访问如喂价和QRNG等链下资源。 API3由DAO管理,致力于在智能合约功能中轻松访问各种有用数据。 构建者在Moonbeam上可以访问不同的API3服务&#xff1…

HTML5原生视频播放器组件video的videocontrolslist属性详解

HTML5提供了内置的视频播放控件,其中videocontrolslist是其中一个很有用的属性。videocontrolslist属性可以用于告诉浏览器在视频播放过程中应该显示哪些默认的用户界面控件。下面我们将从几个方面来介绍videocontrolslist的详细使用。 一、启用videocontrolslist videocont…

《算法通关村——解析堆在合并K个排序链表的应用》

《算法通关村——解析堆在合并K个排序链表的应用》 23. 合并 K 个升序链表 给你一个链表数组,每个链表都已经按升序排列。 请你将所有链表合并到一个升序链表中,返回合并后的链表。 示例 1: 输入:lists [[1,4,5],[1,3,4],[2…

新型信息基础设施下的IP追溯技术:构建数字化安全新境界

随着新型信息基础设施的快速发展,IP(Internet Protocol)追溯技术在数字化安全领域变得愈发重要。IP追溯不仅能够帮助识别网络攻击源,提升网络安全水平,还有助于数字证据追踪、合规性审计等方面。本文将探讨新型信息基础…

【转】ORB-SLAM2调用OAK-D双目摄像头进行点云建图

编辑:OAK中国 首发:A. hyhCSDN 喜欢的话,请多多👍⭐️✍ 内容来自用户的分享,如有疑问请与原作者交流! ▌前言 Hello,大家好,这里是OAK中国,我是助手君。 近期在CSDN刷…

2019年2月25日 Go生态洞察:Go 1.12 版本发布

🌷🍁 博主猫头虎(🐅🐾)带您 Go to New World✨🍁 🦄 博客首页——🐅🐾猫头虎的博客🎐 🐳 《面试题大全专栏》 🦕 文章图文…

BP算法推导

例子1: 例子2: 例子3:

好用的png图片打包plist工具,推荐使用pngPackerGUI_V2.0

png图片打包plist工具,手把手教你使用pngPackerGUI_V2.0此软件是在pngpacker_V1.1软件基础之后,开发的界面化操作软件,方便不太懂命令行的小白快捷上手使用。1.下载并解压缩软件,得到如下目录,双击打开 pngPackerGUI.e…

【23真题】大题全原题的211!题源已定位!

今天分享的是23年长安大学814的信号与系统试题及解析。 本套试卷难度分析:22年长安大学814考研真题,我也发布过,若有需要,戳这里自取!本套试题难度中等偏下,题量偏多,考察的知识点也是很常见的…

CAD与 PDM系统如何协同工作的?

在产品研发中,CAD(计算机辅助设计)和PDM(产品数据管理)是两个核心的工具,它们在产品从设计到制造的整个生命周期中发挥着重要的作用。虽然这两个工具在功能上有所不同,但它们在使用上却有着密切…

中科驭数受邀出席2023 ODCC冬季全会,共谋开放数据中心创新发展

近日,2023年开放数据中心委员会(简称“ODCC”)冬季全会在宁夏银川成功召开,中科驭数作为ODCC的新成员单位,受邀出席本次重要会议。 ▲ 中科驭数正式加入ODCC开放数据中心委员会 开放数据中心委员会是在中国通信标准化…

宏工科技通过CMMI三级认证,软件研发能力获国际权威认可

近日,宏工科技子公司湖南宏工软件成功通过CMMI三级认证并正式获得资质证书,斩获全球软件领域最权威的认证之一,标志着宏工科技在软件技术开发、研发管理、项目管理等多方面获得国际权威认证。 CMMI全称是Capability Maturity Model Integrati…

echarts 通用线性渐变堆叠面积图

echarts 通用线性渐变堆叠面积图 getLineData2() {const myChart echarts.init(this.$refs.chartDom);const option {tooltip: {trigger: axis,},legend: {show: false,textStyle: {fontSize: 14, //字体大小color: #ffffff, //字体颜色},data: [AAA, BBB],},grid: {show: tr…

注意力机制(Q,K,V)基本概念

文章目录 一、注意力提示1.1概念1.2生活中的注意力提示1.3注意力机制基本框架小结 二、注意力汇聚2.1概念2.2非参注意力汇聚2.2.1平均汇聚2.2.2Nadaraya-Waston核回归 2.3通用注意力汇聚公式2.4带参数注意力汇聚小结 三、注意力评分函数3.1概念3.2例子 四、遮蔽softmax三四小结…

echarts 自定义提示样式

在setOption中添加自定义样式 tooltip: {trigger: axis,formatter: (params)> {// console.log(params);var result if(params[0] && params[1]){result 发电量对比<div style"background:#F4F7FC;padding:5px;margin:5px 0px;border-radius:6px"&…

《微信小程序开发从入门到实战》学习三十二

3.5 开发我的投票页面与使用tab栏切换页面 实现很简单&#xff0c;简单的列表页面&#xff0c;但是需要加在tabBar那里&#xff0c;加油。 3.5.1 开发我的投票页面 在app.js里的pages的数组里加上"pages/myVote/myVote"&#xff0c;保存了后出现了myVote文件夹。 …

如何快速检测硬盘健康程度?

当我们使用Windows11/10/8/7计算机时&#xff0c;可能会遇到各种各样的问题&#xff0c;比如蓝屏报错、系统崩溃或其他运行不正常的状况。很多时候都是因为硬盘错误或故障导致的。那么&#xff0c;我们该如何快速检测硬盘健康程度呢&#xff1f; 在驱动器属性中执行硬盘查错 硬…

英语语法:连词or, and, if, unless怎么用?

连词or, and, if, unless怎么用&#xff1f;1. or conj. 或者&#xff0c;还是&#xff0c; 和&#xff0c; 否则用法&#xff1a;并列连词①当“或者&#xff0c;还是”讲时&#xff0c;用在选择疑问句中&#xff0c;是选择疑问句的标志例&#xff1a;Are you a teacher or a …