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、2番目のパラメータとしてオブジェクトを受け入れます。

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)

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のjsチュートリアル: