Microsoft Graph Toolkit コンポーネントによって公開されるイベントを処理する

多くの Microsoft Graph Toolkit コンポーネントは、カスタム イベントを生成します。 これらのイベントにイベント ハンドラーをアタッチすると、それらに応答し、アプリの動作を制御できます。

コンポーネントが生成するイベントを検出する

各 Microsoft Graph Toolkit コンポーネントは、その機能に固有の異なるイベントを生成します。 特定のコンポーネントによって生成されるイベントの一覧を表示するには、そのコンポーネントのドキュメントの 「イベント 」セクションを参照してください。

重要

ファイル リスト コンポーネントなどの itemClick 一部のイベントは、既定のテンプレートを使用している場合にのみ生成されます。 カスタム テンプレートを使用する場合は、イベントの生成を担当する既定のレンダリングを上書きします。

イベントにイベント ハンドラーを追加する

Microsoft Graph Toolkit では、標準 EventTarget.dispatchEvent() 関数を使用して、そのコンポーネントにカスタム イベントを出力します。 ツールキットのコンポーネントによって生成されるカスタム イベントにイベント ハンドラーをアタッチするには、標準 EventTarget.addEventListener() 関数を使用します。

たとえば、ファイル リスト コンポーネントによって生成されるイベントを処理 itemClick するには、コードに次を追加します。

document.querySelector('mgt-file-list').addEventListener('itemClick', e => {
  // your event handler code goes here
});

イベントによって公開される追加情報にアクセスする

Microsoft Graph Toolkit によって生成される一部のイベントには、イベントに関連する追加情報が含まれています。 たとえば、 itemClick ファイル リスト コンポーネントによって生成されるイベントには、ファイル 一覧でクリックされたファイルに関する情報が含まれます。 特定のイベントに追加情報が含まれているかどうかを確認するには、対応するコンポーネントのドキュメントの 「イベント 」セクションを参照してください。

次の例に示すように、イベント ハンドラーに渡されるオブジェクトのeventプロパティを使用してdetails、イベントによって公開される追加情報にアクセスできます。

document.querySelector('mgt-file-list').addEventListener('itemClick', e => {
  const clickedFile = e.details;
});