在访问智能数据洞察 DataWind 过程中会触发各类事件。使用 SDK 时，我们会将事件分派到对应的 Web Component 上，你可以监听到这些事件。

智能数据洞察事件的类型如下所示。具体的 type 与 data 在下表中给出

interface BIEvent extends Event {
  detail: {
    type: string;
    data?: any
  }
}

如下是监听仪表盘保存事件的示例代码

import React from 'react'
import ReactDOM from 'react-dom'

interface AeolusEvent extends Event {
  detail: {
    type: string;
    data?: any
  }
}

class BIComponent extends React.Component {
  componentDidMount() {
    /**
     * Using `document.querySelector(YOUR_SELECTOR)` or `ref.current` to access the aeolus component dom element, 
     * and call `addEventListener` with your listener
     * @example ref.current.addEventListener('aeolusevent', ...)
     */
    document.querySelector('bi-dashboard').addEventListener('aeolusevent', (e: BIEvent) => {
      const { type, data } = e.detail
      if (type === 'dashboardChange') { console.log('dashboard change', data) }
    })
  }

  render() {
    return (
      <bi-dashboard
        urlPrefix='https://console.volcengine.com/bi/datawind'
        appId='******'
        dashboardId='******'
      />
    )
  }
}

ReactDOM.render(<BIComponent />, document.querySelector('body'))