---
order: 8
navTitle: 组件交互
---
# 组件交互

组件可以监听用户的操作，如点击、移入等事件，在事件处理函数中调用页面的`ActionManager.triggerActions()`触发组件上定义的交互。

## 配置交互

在`capabilities.json`中配置`supportActions`为`true`，设置`actionTriggerTypes`为支持的交互触发类型，如`["click"]`。配置后用户可以在设计器中操作组件的属性面板，在交互选项卡中添加交互。

TODO 补充截图

## 触发交互

在`IVisualComponent.render()`函数中，可以绑定组件支持的事件，并在事件中触发交互。

```typescript
export class MyVisualComponent implements IVisualComponent {

    private visualObject: IVisualObject;

    private componentBuilder: IVisualComponentBuilder;

    private domBase: HTMLElement;

    private clickHandler: (event: MouseEvent) => void;

    public render(args: VisualComponentRenderArgs):void {
        //... init dom
        this.domBase.addEventListener('click', this.clickHandler = this.doClick.bind(this));
    }

    private doClick(event: MouseEvent): void {
        let args: TriggerActionsArgs = {
            event: event,
            componentBuilder: this.componentBuilder,
            visualComponent: this
        };
        this.visualObject.getActionManager().triggerActions(args);
    }

    public dispose(): void {
        this.domBase.removeEventListener('click', this.clickHandler);
    }
}
```