Manipular eventos expostos por componentes do Kit de Ferramentas do Microsoft Graph

Muitos componentes do Microsoft Graph Toolkit emitem eventos personalizados. Anexar manipuladores de eventos a esses eventos permite que você responda a eles e controle o comportamento do seu aplicativo.

Descobrir quais componentes de eventos emitem

Cada componente do Microsoft Graph Toolkit emite eventos diferentes, específicos para sua funcionalidade. Para ver a lista de eventos emitidos pelo componente específico, consulte a seção Eventos da documentação desse componente.

Importante

Alguns eventos, como itemClick no componente lista de arquivos, são emitidos somente ao usar o modelo padrão. Se você usar um modelo personalizado, substituirá a renderização padrão responsável por emitir o evento.

Adicionar manipuladores de eventos a eventos

O Microsoft Graph Toolkit usa a função padrão EventTarget.dispatchEvent() para emitir eventos personalizados em seus componentes. Para anexar um manipulador de eventos a um evento personalizado emitido pelo componente de um kit de ferramentas, use a função padrão EventTarget.addEventListener() .

Por exemplo, para lidar com o itemClick evento emitido pelo componente lista de arquivos, adicione o seguinte ao código.

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

Acessar informações adicionais expostas pelo evento

Alguns eventos emitidos pelo Microsoft Graph Toolkit contêm informações adicionais relevantes para o evento. Por exemplo, o itemClick evento, emitido pelo componente Lista de arquivos, contém informações sobre o arquivo que foi clicado na lista de arquivos. Para ver se o evento específico contém informações adicionais, consulte a seção Eventos da documentação do componente correspondente.

Você pode acessar as informações adicionais expostas por um evento por meio da details propriedade do objeto passado para o event manipulador de eventos, conforme mostrado no exemplo a seguir.

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