我们写的许多代码都涉及对事件的反应。I/O事件,如鼠标点击或键盘事件。网络事件,当你听一个HTTP调用时。
这些就是我所说的内置事件。
在JavaScript中,我们可以创建自定义的事件,它的工作方式在浏览器和Node.js中都有变化。
在前端,我们使用由浏览器提供的事件对象。
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'
}
})
使用CustomEvent ,在事件监听器中,你可以使用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)