我们编写的许多代码涉及对事件的反应,例如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()
该对象提供了许多其他方法,其中包括on
和emit
方法。
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)