我们编写的许多代码涉及对事件的反应,例如I/O事件(如鼠标点击或键盘事件)和网络事件(当您监听HTTP调用时)。这就是我所说的内置事件。

在JavaScript中,我们可以创建自定义事件,并且它在浏览器和Node.js中的工作方式不同。

在前端,我们使用浏览器提供的Event对象:

const anEvent = new Event('start');

您可以使用以下代码触发事件:

document.dispatchEvent(anEvent)

当发生这种情况时,事件监听器将被触发:

document.addEventListener('start', event => { 
 console.log('started!')
})

您可以使用内置的CustomEvent对象发送自定义数据,而不是使用Event对象,该对象接受一个对象作为第二个参数:

const anotherEvent = new CustomEvent('start', {
 detail: {
 color: 'white'
 }
})

在事件监听器中,您可以使用event.detail从事件对象中获取数据(您不能使用其他属性):

document.addEventListener('start', event => {
 console.log('started!')
 console.log(event.detail)
})

在后端,Node为我们提供了一种使用events模块构建类似系统的选项。

这个模块特别提供了EventEmitter类,我们将使用它来处理我们的事件。

使用以下代码初始化:

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

该对象提供了许多其他方法,其中包括onemit方法。

  • emit用于触发事件
  • on用于在事件触发时添加要执行的回调函数

例如,让我们创建一个start事件,并作为示例,我们只是将其记录到控制台:

eventEmitter.on('start', () => {
 console.log('started')
})

当我们运行以下代码时:

eventEmitter.emit('start')

事件处理函数将被触发,并且我们会得到控制台日志。

您可以通过将它们作为额外参数传递给emit()来将参数传递给事件处理程序:

eventEmitter.on('start', (number) => {
 console.log(`started ${number}`)
})

eventEmitter.emit('start', 23)

多个参数:

eventEmitter.on('start', (start, end) => {
 console.log(`started from ${start} to ${end}`)
})

eventEmitter.emit('start', 1, 100)