An event emitter/listener tool based on EventEmitter3.
npm install eventemitter-supershell
npm install --save eventemitter-super
`
$3
`html
`
Usage
You can then use it as a window global or as an CommonJs module
`js
// plain javascript in browser
var eventBus = new EventTool.EventEmitterSuper()
// commonJs
const EventTool = require('eventemitter-super')
const eventBus = new EventTool.EventEmitterSuper()
// es6 module 使用ES6模块，需要在项目中集成webpack等打包工具
/**
* If you want to use this library by esm, you must ensure that your project
* has used webpack, vite, rollup or other packaging tools.
*/
import { EventEmitterSuper } from 'eventemitter-super'
const eventBus = new EventEmitterSuper()
`
Example
`js
// 扩展了常用方法的别名: bindOnce(once)、bind(on)、fire(emit)、unbind(off)、un(off)、addOnceListeners(onceEvents)
// Extend the alias of commonly used methods: bindOnce(once), bind(on), fire(emit), unbind(off), un(off), addOnceListeners(onceEvents)
`
$3
`js
import EventEmitterSuper from 'eventemitter-super';
const eventBus = new EventEmitterSuper()
// 返回一个函数，调用该函数可以销毁监听器
// Returns a function, which can be called to destroy the listener
const destoryEvent = eventBus.on('event1', () => {
console.log('event1执行')
})
destoryEvent() // 执行后，销毁监听器
`
$3
`js
const eventBus = new EventEmitterSuper()
// 为htmlElement创建一个监听器，返回一个函数，调用该函数可以销毁监听器
// Create a listener for the htmlElement, and return a function, which can be called to destroy the listener
const div = document.getElementById('test-div')
const destoryEvent = eventBus.addHtmlListener(div, 'click', () => {})
destoryEvent() // 执行后，销毁监听器
`
$3
`js
// 防抖
const eventBus = new EventEmitterSuper()
const destoryEvent = eventBus.onDebounce('event1', function (){
console.log('event1', arguments)
}, 1000, null) // 返回一个函数，调用该函数可以销毁监听器
const code = setInterval(() => {
eventBus.fire('event1', 1, 2, 3)
}, 100)
setTimeout(() => {
clearInterval(code) // 5秒后停止发送event1事件, 触发防抖监听器 // Stop sending event1 events after 5 seconds, and trigger the debounce listener
}, 5000)
// 节流
const eventBus = new EventEmitterSuper()
const destroy = eventBus.onThrottle('event1', function (){
console.log('event1', arguments)
}, 1000, null)
const code = setInterval(() => {
eventBus.fire('event1', 1, 2, 3)
}, 100)
setTimeout(() => {
clearInterval(code)
}, 5000)
`
$3
`html
// 示例-html元素事件防抖
// 示例-html元素事件节流
`
$3
`js
const eventBus = new EventEmitterSuper()
// onceEvents：所有事件执行完成后执行回调函数
// onceEvents: The callback function will be executed after all events are executed
eventBus.onceEvents(['event1', 'event2'], () => {
console.log('event1 and event2')
})
setTimeout(() => {
eventBus.emit('event2')
}, 1000)
setTimeout(() => {
eventBus.emit('event1')
}, 2000) // 两秒后打印event1 and event2 // event1 and event2 will be printed after 2 seconds
`
$3
`js
const eventBus = new EventEmitterSuper()
eventBus.onceByExecCount('test', () => {
console.log('event emitted')
}, 3)
eventBus.emit('test')
eventBus.emit('test')
eventBus.emit('test') // 在第3次执行时控制台打印"event emitted" // event emitted will be printed in the console after the third execution
`
$3
`js
const eventBus = new EventEmitterSuper()
// exp1
eventBus.onceWithMaxWaitTime('test', () => {
console.log('event emitted')
}, 3000) // 3秒后如果未监听到test事件，则自动触发回调函数，控制台打印"event emitted" // If the test event is not listened to after 3 seconds, the callback function will be triggered automatically, and "event emitted" will be printed in the console
// exp2
eventBus.onceEventsWithMaxWaitTime(['test1', 'test2'], () => {
console.log('event emitted')
}, 3000) // 3秒后如果未监听到test1、test2事件，则自动触发回调函数，控制台打印"event emitted" // If the test1 and test2 events are not listened to after 3 seconds, the callback function will be triggered automatically, and "event emitted" will be printed in the console
// exp3
eventBus.onceEventsWithMaxWaitTime(['test1', 'test1'], () => {
console.log('event emitted')
}, 3000) // 3秒后如果未监听到test1事件执行2次，则自动触发回调函数，控制台打印"event emitted" // If the test1 event is not executed twice after 3 seconds, the callback function will be triggered automatically, and "event emitted" will be printed in the console
`
$3
`js
// 对一些方法进行封装，能够返回Promise对象
oncePromise(event: T, context?: Context): Promise
onceEventsPromise(eventNames: T[], context?: Context): Promise
onceByExecCountPromise(event: T, execCount: number, context?: Context): Promise
onceWithMaxWaitTimePromise(event: T, maxTime: number, context?: Context): Promise
onceEventsWithMaxWaitTimePromise(eventNames: T[], maxTime: number, context?: Context): Promise
// exp1
async function test() {
const res = await eventBus.oncePromise('test')
console.log(res)
}
test()
// 3秒后发送test事件
setTimeout(() => {
eventBus.emit('test', 'eventobj1', 'eventobj2')
}, 3000) // 3秒后打印["eventobj1", "eventobj2"] // After 3 seconds, the console will print ["eventobj1", "eventobj2"]
// exp2
async function test() {
// 监听test1事件，最大等待时间设置为3秒
const res = await eventBus.onceWithMaxWaitTimePromise('test1', 3000)
console.log(res)
}
test()
// 1秒后发送test事件
setTimeout(() => {
eventBus.emit('test1', 'eventobj1', 'eventobj1')
}, 1000) // 1秒后打印["eventobj1", "eventobj1"] // After 1 second, the console will print ["eventobj1", "eventobj1"]
``