/

JavaScript中的自定义事件

JavaScript中的自定义事件

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

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

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

1
const anEvent = new Event('start');

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

1
document.dispatchEvent(anEvent)

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

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

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

1
2
3
4
5
const anotherEvent = new CustomEvent('start', {
 detail: {
 color: 'white'
 }
})

在事件监听器中，您可以使用event.detail从事件对象中获取数据（您不能使用其他属性）：

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

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

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

使用以下代码初始化：

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

该对象提供了许多其他方法，其中包括on和emit方法。

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

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

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

当我们运行以下代码时：

1
eventEmitter.emit('start')

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

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

1
2
3
4
5
eventEmitter.on('start', (number) => {
 console.log(`started ${number}`)
})

eventEmitter.emit('start', 23)

多个参数：

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

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

tags: [“JavaScript”, “Events”, “Custom Events”]