---
title: event - 事件 API
sidebar_position: 10
---
> **@types** [IPublicApiEvent](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/event.ts)
> **@since** v1.0.0
## 模å—简介
è´Ÿè´£äº‹ä»¶å¤„ç† API，支æŒè‡ªå®šä¹‰ç›‘å¬äº‹ä»¶ã€è§¦å‘事件。
## 方法
### on
监å¬äº‹ä»¶
```typescript
/**
* 监å¬äº‹ä»¶
* add monitor to a event
* @param event 事件å称
* @param listener 事件回调
*/
on(event: string, listener: (...args: any[]) => void): IPublicTypeDisposable;
```
相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
### prependListener
监å¬äº‹ä»¶ï¼Œä¼šåœ¨å…¶ä»–回调函数之å‰æ‰§è¡Œ
```typescript
/**
* 监å¬äº‹ä»¶ï¼Œä¼šåœ¨å…¶ä»–回调函数之å‰æ‰§è¡Œ
* @param event 事件å称
* @param listener 事件回调
*/
prependListener(event: string, listener: (...args: any[]) => void): IPublicTypeDisposable;
```
相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
### off
å–消监å¬äº‹ä»¶
```typescript
/**
* å–消监å¬äº‹ä»¶
* cancel a monitor from a event
* @param event 事件å称
* @param listener 事件回调
*/
off(event: string, listener: (...args: any[]) => void): void;
```
### emit
触å‘事件
```typescript
/**
* 触å‘事件
* emit a message for a event
* @param event 事件å称
* @param args 事件å‚æ•°
* @returns
*/
emit(event: string, ...args: any[]): void;
```
## 使用示例
### 事件触å‘和监å¬
```typescript
const eventName = 'eventName';
// 事件监å¬
// æ’件ä¸å‘出的事件，默认以 `common` 为å‰ç¼€ï¼Œç›‘å¬æ—¶éœ€è¦æ³¨æ„下
event.on(`common:${eventName}`);
// 触å‘事件
event.emit(eventName);
```
### setter å’Œ setter/plugin 之间的è”动
在 A setter ä¸è¿›è¡Œäº‹ä»¶æ³¨å†Œï¼š
```typescript
import { event } from '@alilc/lowcode-engine';
const SETTER_NAME = 'SetterA';
class SetterA extends React.Component {
componentDidMount() {
// 这里由于é¢æ¿ä¸Šä¼šæœ‰å¤šä¸ª setter，使用 field.id æ¥æ ‡è®° setter å
this.emitEventName = `${SETTER_NAME}-${this.props.field.id}`;
event.on(`common:${this.emitEventName}.bindEvent`, this.bindEvent)
}
bindEvent = (eventName) => {
// do someting
}
componentWillUnmount() {
// setter 是以实例为å•ä½çš„，æ¯ä¸ª setter 注销的时候需è¦æŠŠäº‹ä»¶ä¹Ÿæ³¨é”€æŽ‰ï¼Œé¿å…äº‹ä»¶æ± è¿‡å¤š
event.off(`common:${this.emitEventName}.bindEvent`, this.bindEvent)
}
}
```
在 B setter ä¸è§¦å‘事件，æ¥å®Œæˆé€šä¿¡ï¼š
```typescript
import { event } from '@alilc/lowcode-engine';
class SetterB extends React.Component {
bindFunction = () => {
const { field, value } = this.props;
// 这里展示的和æ’件进行通信，事件规则是æ’件å + 方法
event.emit('eventBindDialog.openDialog', field.name, this.emitEventName);
}
}
```