import {Meta} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/ru/functional-basic/# Управление событиями'/>

# Управление событиями

Класс `EventItem` — это продвинутая обертка для управления слушателями событий на DOM-элементах или объекте `window`. Он упрощает весь жизненный цикл событий, обеспечивает автоматический контроль наличия элемента в DOM и предоставляет встроенные оптимизации для высокочастотных событий.

```javascript
import { EventItem } from '@dxtmisha/functional-basic'

// 1. Инициализация
const event = new EventItem('.my-button', 'click', () => {
  console.log('Клик по кнопке!')
})

// 2. Управление жизненным циклом
event.start()  // Запустить прослушивание
event.stop()   // Остановить
event.toggle(true) // Переключить состояние
```

## Мониторинг элементов

Одной из ключевых особенностей `EventItem` является автоматическая деактивация события, если целевой элемент (или контрольный элемент) удаляется из DOM. Это предотвращает утечки памяти и ошибки в динамических интерфейсах.

```javascript
// Событие автоматически остановится, если элемент .my-button исчезнет из DOM
const event = new EventItem('.my-button', 'scroll', handler)
event.start()
```

## Оптимизация производительности

Класс включает встроенные механизмы оптимизации для тяжелых событий, таких как изменение размера окна или синхронизация прокрутки.

### Тип `resize`
Использует `ResizeObserver` вместо стандартного события `resize`, что позволяет отслеживать изменение размера конкретного элемента, а не только всего окна.

```javascript
const resizeEvent = new EventItem('.container', 'resize', (entry) => {
  console.log('Новая ширина:', entry.contentRect.width)
})
```

### Тип `scroll-sync`
Оптимизирует обработку прокрутки через `requestAnimationFrame`, предотвращая избыточные вызовы обработчика и снижая нагрузку на процессор.

```javascript
const scrollEvent = new EventItem(window, 'scroll-sync', () => {
  // Выполнится максимально плавно
})
```

## Ручной запуск событий

Вы можете вручную инициировать выполнение события на целевом элементе через метод `dispatch`. Это полезно для программной имитации действий пользователя.

```javascript
// Имитация клика
event.dispatch()

// Передача дополнительных данных (detail)
const customEvent = new EventItem(window, 'my-event', (e, detail) => {
  console.log('Данные:', detail)
})
customEvent.dispatch({ id: 123 })
```
