События

Функции для работы с событиями: добавление, удаление, замена обработчиков и управление ими.

Список методов

Регистрация и управление обработчиками событий

Функция	Сигнатура	Описание
on	<T extends Event>(element: HTMLElement | Document | Window, eventName: string, handler: EventHandler<T>, options?: AddEventListenerOptions | boolean): void	Регистрирует обработчик события на элементе с автоматическим отслеживанием для последующего удаления.
off	(element: HTMLElement | Document | Window, eventName: string, options?: AddEventListenerOptions | boolean): void	Удаляет обработчик события с элемента.
rebind	<T extends Event>(element: HTMLElement | Document | Window, eventName: string, handler: EventHandler<T>, options?: AddEventListenerOptions | boolean): void	Заменяет существующий обработчик события на новый (удаляет старый, добавляет новый).

Примеры использования

Регистрация обработчика событий

1. on

import { on, queryList } from 'snappykit';

const [button] = queryList<HTMLButtonElement>('button')!;

// Базовая регистрация обработчика
on(button, 'click', (event) => {
  console.log('Кнопка нажата!', event);
});

// Регистрация с идентификатором события
on(button, 'click.submitBtn', (event) => {
  console.log('Кнопка отправки нажата!', event);
});

// Регистрация с опциями
on(button, 'click', (event) => {
  console.log('Кнопка нажата один раз!', event);
}, { once: true });

---

Удаление обработчика событий

2. off

import { on, off, queryList } from './events';

const [button] = queryList<HTMLButtonElement>('button')!;

// Удаление обработчика по идентификатору
on(button, 'click.submitBtn', () => console.log('Кнопка нажата!'));
off(button, 'click.submitBtn'); // Удаляет только обработчик с идентификатором "submitBtn"

// Удаление всех обработчиков для типа события
off(button, 'click'); // Удаляет все обработчики для события "click" на кнопке

---

Замена обработчика событий

3. rebind

import { on, rebind, queryList } from './events';

const [button] = queryList<HTMLButtonElement>('button')!;

// Замена обработчика
on(button, 'click', () => console.log('Старый обработчик'));
rebind(button, 'click', () => console.log('Новый обработчик')); // Заменяет старый обработчик на новый

// Замена обработчика с идентификатором
on(button, 'click.submitBtn', () => console.log('Старый обработчик для submitBtn'));
rebind(button, 'click.submitBtn', () => console.log('Новый обработчик для submitBtn'));

Типы

В функциях выше используются следующие типы:

type EventHandler<T extends Event = Event> = (event: T) => void;