カスタムイベント

JavaScriptはイベントでいっぱいです.彼らはこの言語の最も重要な機能の一つです.既存の組み込みイベントはたくさんあります.最も人気があるのはおそらく
をクリックして、mousemove、keyup、変更、送信、等を見つけることができますdocumentation page .
イベントは、アプリケーションに存在する要素と対話したり、ユーザーによって実行されるアクションを処理する良い方法です.
しかし、コードの特定のブロックが実行された後に関数を呼び出すときに状況が発生する可能性があります.またはトリガーのいずれかの組み込みイベントを手動で.この記事では、いくつかのケースを示したいEvent() and CustomEvent() コンストラクタです.

イベントの作成とディスパッチ
以下の状況を考えてみましょう.スクリプトで動的に入力値を変更します.
index.html

<input class="form__input" value="" />
<button class="form__change">Change data</button>

script.js

const inputEl = document.querySelector('.form__input');
const buttonEl = document.querySelector('.form__change');

inputEl.addEventListener('change', e => {
  console.log('New value', e.target.value);
});

buttonEl.addEventListener('click', () => {
  inputEl.value = 'Example value';
});

このような状況でchange イベントは引き起こされません.手動でトリガーしなければなりません.ここでEvent() コンストラクタ.イベントの作成は簡単です.const newEvent = new Event('change');
次に、このイベントを要素に送信します.inputEl.dispatchEvent(newEvent);イベント名が入った文字列をEvent() コンストラクタパラメータは、addEventListener .
だから、トリガchange イベントでは、これらの2行をコード内の適切な場所に追加する必要があります.
script.js

buttonEl.addEventListener('click', () => {
  inputEl.value = 'Example value';
  const changeEvent = new Event('change');
  inputEl.dispatchEvent(changeEvent)
});

さて、change イベントにイベントが発生します.
上で述べたように、我々のイベントの名前はJavaScriptで既に組み込まれている名前に限定されません.
これは私たちが同じイベント名をEvent() コンストラクタaddEventListener .

const myEvent = new Event('myEventName');
inputEl.addEventListener('myEventName', () => {...});

データのイベントのディスパッチ
それはすべてではない.カスタムイベントの作成、ディスパッチ、およびリスニングとは別に、イベントオブジェクトにデータを追加する可能性があります.我々がイベントでデータを伝えたいならば、我々は使わなければなりませんCustomEvent() コンストラクタ.
modal.html

<div class="modal">
  <div class="modal-content">
    Modal content...
  </div>

  <button class="modal-close">Close</button>
</div>

modal.js

const buttonElement = document.querySelector('.modal-close')
const modal = document.querySelector('.modal');

buttonElement.addEventListener('click', () => modal.dispatchEvent(closeModalEvent))

const userData = {
  name: 'Joe',
  lastName: 'Doe',
  age: 50
};

const closeModalEvent = new CustomEvent('closeModal', {
  bubble: true,
  detail: {
    modalId: 1,
    data: userData
  },
  cancelable: true
});

modal.addEventListener('closeModal', e => console.log(e.detail));

上記の例では、[詳細]オブジェクトは、ボタンでモーダルが閉じられた後にディスパッチされます.あなたのコードの他の場所のデータを受信し、さらにアクションを処理できます.
ご覧の通り、私は他の2つの追加のプロパティdetail . これらは次のとおりです.bubble - イベントが親要素によって捕捉されなければならないかどうかを判断します.デフォルト値はfalse .cancelable - イベントをキャンセルできるかどうかを定義します.デフォルト値はfalse .

ブラウザ互換性CustomEvent() Internet Explorerを除くすべての主要ブラウザで利用可能です.このブラウザでは、ポリフィルを使用できます.入手可能on MDN .
基本的に我々はcreateEvent and initEvent .

var element = document.getElementByClassName('.input');
var customEvent = document.createEvent('Event');
customEvent.initEvent('customEvent');

element.addEventListener('customEvent', function(e) {
  console.log('Event', e)
}, false);

element.dispatchEvent(customEvent);

カスタムeventエミッタ機能
この記事の最後に、カスタムイベントを扱うときに使う簡単な解決方法を示したいと思います.
私は、我々のコードの異なる場所で複数回使用される機能のためにユーティリティ機能をするのを好みます.コンストラクタを使用して新しいイベントを作成するのを避けるために、コード内の任意の場所にインポートできるオブジェクトを作成しました.
このコードは、カスタムeventエミッタを探している間に見つけたいくつかのカスタムeventemtersチュートリアルに基づいています.
eventEmitter.js

const EventEmitter = {
  events: {},
  dispatch: function(event, data) {
    if (!this.events[event]) return
    this.events[event].forEach(callback => callback(data))
  },
  subscribe: function(event, callback) {
    if (!this.events[event]) this.events[event] = []
    this.events[event].push(callback)
  }
}

module.exports = { EventEmitter }

私がイベントに関するどんな操作も処理したいならば、私はちょうどこのオブジェクトを輸入して、そのメソッドを使用します.
index.js

import { EventEmitter } from './../utils/eventEmitter.js';

const data = {
  name: 'Andy',
  age: 50
};

const emitChange = data => {
  EventEmitter.dispatch('change', data)
};

navigation.js

import { EventEmitter } from './../utils/eventEmitter.js';

EventEmitter.subscribe('change', event => {
  /* perform any action with event data */ 
});

結論
カスタムイベントを使用すると、より柔軟で再利用可能なコードを記述できます.コードのどの部分を実行し、すべてのアクションを所望の予測可能な方法で実行するかを決めることができます.