JavaScript中的自定義事件

我們編寫的許多代碼都涉及對事件的反應。 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'
  }
})

使用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)

免費下載我的JavaScript初學者手冊


更多js教程: