Поделиться через

Обработка событий, предоставляемых компонентами 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 событие, созданное компонентом списка файлов, содержит сведения о файле, который был щелкнут в списке файлов. Чтобы узнать, содержит ли конкретное событие дополнительные сведения, см. раздел События документации по соответствующему компоненту.

Доступ к дополнительным сведениям, предоставляемым событием, можно получить через details свойство event объекта, переданное в обработчик событий, как показано в следующем примере.

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