-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
-
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
-
keyboard_arrow_right keyboard_arrow_down
-
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
-
keyboard_arrow_right keyboard_arrow_down
-
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
keyboard_arrow_right keyboard_arrow_down
-
-
keyboard_arrow_right keyboard_arrow_down
- YCLIENTS
- Маркетплейс интеграций
- Плагинизация
- Руководство по созданию Frontend плагина
- Событийная модель
- DocumentEventEmitter
DocumentEventEmitter
Класс для работы с событиями документа. Реализует интерфейс IDocumentEventEmitter и добавляет обработку событий на уровне document.
Основные возможности
- Подписка на события документа
- Отправка событий на уровне документа
- Типизированная работа с событиями
- Автоматическая очистка слушателей
API Reference
Методы
onDocument(eventName, listener)
Подписка на событие документа.
onDocument<T>(eventName: string, listener: CustomEventListener<T>): void
offDocument(eventName, listener)
Отписка от события документа.
offDocument<T>(eventName: string, listener: CustomEventListener<T>): void
emit(eventName, detail)
Отправка события на уровне документа.
emit(eventName: string, detail?: T): void
Примеры использования
Базовое использование
import { DocumentEventEmitter } from '@yclients-plugins/utils';
const emitter = new DocumentEventEmitter<string>();
// Подписка на событие
emitter.onDocument('user-login', (event) => {
console.log('User logged in:', event.detail);
});
// Отправка события
emitter.emit('user-login', 'john.doe@example.com');
Использование с интерфейсами
import { DocumentEventEmitter } from '@yclients-plugins/utils';
interface UserData {
id: number;
name: string;
email: string;
}
const emitter = new DocumentEventEmitter<UserData>();
// Подписка на событие
emitter.onDocument('user-update', (event) => {
console.log('User updated:', event.detail.name);
});
// Отправка события
emitter.emit('user-update', {
id: 1,
name: 'John Doe',
email: 'john@example.com',
});
Использование в плагинах
import { DocumentEventEmitter } from '@yclients-plugins/utils';
interface PluginEvent {
type: 'ready' | 'update';
payload: any;
}
class MyPlugin {
private eventEmitter = new DocumentEventEmitter<PluginEvent>();
init() {
// Подписка на события хоста
this.eventEmitter.onDocument('host-ready', (event) => {
console.log('Host is ready:', event.detail);
});
// Отправка события готовности плагина
this.eventEmitter.emit('plugin-ready', {
type: 'ready',
payload: { status: 'initialized' },
});
}
}
Использование с универсальным типом TPluginEvent
import { DocumentEventEmitter, TPluginEvent } from '@yclients-plugins/utils';
interface UserEvent {
id: number;
name: string;
}
const emitter = new DocumentEventEmitter<TPluginEvent<UserEvent>>();
// Подписка на событие
emitter.onDocument('user:created', (event) => {
console.log('User created:', event.detail.payload.name);
console.log('Container ID:', event.detail.containerId);
console.log('Area:', event.detail.area);
});
// Отправка события
emitter.emit('user:created', {
area: 'my-plugin-area',
containerId: 'container-123',
payload: {
id: 1,
name: 'John Doe',
},
});
Использование глобального DocumentEventEmitter
import { documentEventEmitter } from '@yclients-plugins/utils';
// Подписка на глобальное событие документа
documentEventEmitter.onDocument('app:initialized', (event) => {
console.log('Application initialized:', event.detail);
});
// Вызов глобального события документа
documentEventEmitter.emit('app:initialized', { version: '1.0.0' });
Экспорты
Основные экспорты
import { DocumentEventEmitter } from '@yclients-plugins/utils';
Глобальный синглтон
import { documentEventEmitter } from '@yclients-plugins/utils';
Типы
import type { CustomEventListener } from '@yclients-plugins/utils'; Была ли статья полезна?