JavaScript中的自定义事件的介绍

95 阅读1分钟

我们写的许多代码都涉及对事件的反应。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()

这个对象暴露了,除其他外,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)