イベントの作成とディスパッチ

コンポーネントの JavaScript クラスでイベントを作成してディスパッチします。イベントを作成するには、CustomEvent() コンストラクタを使用します。イベントをディスパッチするには、EventTarget.dispatchEvent() メソッドをコールします。

CustomEvent() コンストラクタでは、イベント種別を示す文字列のみが必須のパラメータとなります。コンポーネントの作成者は、イベントを作成するときにイベント種別を指定します。イベント種別としては任意の文字列を使用できます。ただし、DOM イベントの標準に準拠することをお勧めします。

• すべて小文字
• スペースなし
• 単語と単語の区切りはアンダースコア

インラインイベントハンドラ名の先頭は on でなければならないため、イベント名の先頭には on を付けないでください。イベント名が onmessage の場合、マークアップは <c-my-component ononmessage={handleMessage}> になります。onon と言葉が重複しているため、混乱の原因となります。

では、コードを確認しましょう。

c-paginator コンポーネントには、[前へ] ボタンと [次へ] ボタンがあります。ユーザがこれらのボタンをクリックすると、コンポーネントはそれぞれ previous イベントと next イベントを作成してディスパッチします。paginator コンポーネントは、[前へ] ボタンと [次へ] ボタンが必要な任意のコンポーネントにドロップできます。その親コンポーネントはイベントをリスンして処理します。

ユーザがボタンをクリックすると、previousHandler または nextHandler 関数が実行されます。これらの関数は previous イベントと next イベントを作成してディスパッチします。

これらは単に「何かが起きた」ことだけを通知するイベントです。DOM ツリーで上方向にデータペイロードを渡すことはせず、単にユーザがボタンをクリックしたことのみを通知します。

previous イベントと next イベントをリスンして処理する c-event-simple というコンポーネントに paginator をドロップしてみましょう。

イベントをリスンするには、oneventtype という構文で HTML 属性を使用します。イベント種別は previous と next であるため、リスナーは onprevious と onnext になります。

c-event-simple が previous イベントまたは next イベントを受け取ると、previousHandler 関数または nextHandler 関数が実行されて、ページ番号が 1 つ減り/増えます。

受信側のコンポーネントまでデータを渡すには、CustomEvent コンストラクタで detail プロパティを設定します。受信側のコンポーネントは、イベントリスナーのハンドラ関数で detail プロパティのデータにアクセスします。

lwc-recipes リポジトリの c-event-with-data コンポーネントを見てみましょう。

取引先責任者リストの各項目は、ネストされた c-contact-list-item コンポーネントです。

c-contact-list-item コンポーネントは、selectHandler 関数を実行する onclick イベントリスナーで取引先責任者の名前と写真をアンカータグにラップします。

ユーザが取引先責任者をクリックして選択すると、コンポーネントは selected という CustomEvent を作成してディスパッチします。イベントには、選択された取引先責任者の ID である detail: this.contact.Id というデータが含まれます。親コンポーネントの c-event-custom は、取引先責任者の参照を使用して、取引先責任者の詳細を表示します。

c-event-with-data コンポーネントは、onselected 属性で selected イベントをリスンして、contactSelected イベントハンドラで処理します。

contactSelected イベントハンドラでは、コンポーネントは event.detail プロパティを contactId プロパティに割り当てます。そして、その ID を持つ取引先責任者を、@wire でプロビジョニングされた contacts 配列で探し、取引先責任者の名前、役職、電話番号、メールアドレスをテンプレートに表示します。

関連トピック

• イベントのベストプラクティス
• MDN web docs: CustomEvent()
• MDN web docs: EventTarget.dispatchEvent()
• Shadow DOM