JavaScript: CustomEvent と dispatchEvent について

この記事ではEvent、 、CustomEventコンストラクター、およびdispatchEvent()メソッドを使用してイベントを作成およびディスパッチする方法を説明します。また、カスタム イベントと dispatchEvent がプロジェクトでどのように、またどのような目的で使用されているかについても説明します。

この記事の終わりまでに、カスタム イベントを作成できるようになっていることを願っています。

それでは始めましょう！

Web アプリケーションは一連のイベントで構成されており、これらのイベントは Web アプリケーションの最も重要な部分の 1 つと言えます。

場合によっては、デフォルトの JavaScript イベントが要件を満たしていないことがあります。たとえば、私たちのアプリケーションでは、デフォルトの JavaScript イベントでは利用できないいくつかのカスタム イベントを使用して、通知を追加したり、一部のデータを更新したりしています。これらについては、この記事の残りの部分で見ていきます。

カスタムイベントを作成するにはどうすればよいですか?

カスタム イベントを作成するには、2 つの方法があります。

• 最初の方法は、Eventコンストラクターを使用することです。
• 2 番目の方法は、私たちが好むCustomEventコンストラクターを使用することです。

イベント コンストラクター

次のように Event コンストラクターを使用してカスタム イベントを作成できます。

イベント名は大文字と小文字が区別されないことに注意してください。So NOTIFICATION_ADD は またはと同じ です。Notification_Add notification_add

const event = new Event('NOTIFICATION_ADD');

上記のように、イベント オブジェクトにさらにデータを追加する場合は、次のように CustomEvent コンストラクターを使用できます。

const event = new CustomEvent('NOTIFICATION_ADD', { 
  detail: {
    title: 'Error!',
    message: 'There was a problem creating your account.'
  }
});

さて、イベントが作成されました。次は何ですか？もちろん、プロジェクトで使用したいと考えています。イベントを発生させる最後のステップは、dispatchEvent() メソッドを呼び出すことです。Event オブジェクトであるイベントパラメータを受け入れます。

例を示しましょう。

const event = new CustomEvent('NOTIFICATION_ADD', { 
  detail: {
    title: 'Error!',
    message: 'There was a problem creating your account.'
  }
});

// We are dispatching the our custom event here.
window.dispatchEvent(event);

// Let's say we have a handleAddNotification function inside our project like below
function handleAddNotification(e) {
  // logic here.
  
}

window.addEventListener('NOTIFICATION_ADD', handleAddNotification);

<button onclick="handleButtonClick()">
  Create my account
</button>
const event = new CustomEvent('NOTIFICATION_ADD', { 
  detail: {
    title: 'Error!',
    message: 'There was a problem creating your account.'
  }
});

function handleButtonClick(){
 window.dispatchEvent(event);
}

function handleAddNotification(e) {
  alert(e.detail.title + ' ' + e.detail.message);
}

window.addEventListener('NOTIFICATION_ADD', handleAddNotification);

どのような目的で、どこで使用するのですか?

読む前に、マイクロ フロントエンドに関するこれらの記事を参照してください。

CicekSepeti には、ここにマイクロ フロントエンド アーキテクチャがあり、ボタン、ツールチップ、通知、チェックボックスなどのカスタム コンポーネントと、いくつかのフラグメントがあります。これらのコンポーネントとフラグメントの間で通信が必要になる場合があります。この時点で、カスタム イベントが役に立ちます。

例について言えば、リモートに通知コンポーネントがあり、いくつかのトランザクションの後にページの 1 つに表示したいと考えています。

この場合、通知コンポーネントには「NOTIFICATION_ADD」という名前のイベント リスナーがあり、ページには登録フォームがあります。ユーザーが登録ボタンを押すと、API リクエストを作成し、dispatchEvent メソッドとカスタム イベント コンストラクターを介して成功またはエラーのトースト メッセージを表示します。

通知コンポーネントのイベント リスナーのおかげで、他のプロジェクトで以前に定義したカスタム イベントをいつでもどこでもトリガーできます。

概要

JavaScript カスタム イベントを適切に使用すると、アプリのユーザー エクスペリエンスと開発エクスペリエンスの両方を向上させることができます。これからは、キーボード イベント、マウス イベントなどの JavaScript のデフォルト イベントが要件を満たさない場合に、カスタム イベントを使用できることがわかります。

参考文献