Метод $.fire() для триггеров

Метод $.fire() является ключевым инструментом в библиотеке Bliss.js, предназначенным для программного вызова событий на элементах DOM. Он позволяет инициировать как стандартные события браузера, так и пользовательские события, обеспечивая гибкую систему взаимодействия между компонентами и элементами страницы.

Синтаксис

$.fire(element, eventName, [data]);

Параметры:

element — DOM-узел или коллекция узлов, на которых будет вызвано событие. Может быть одиночным элементом или массивоподобным объектом, поддерживающим итерацию.
eventName — строка, имя события. Может быть как стандартным (click, input, change), так и кастомным (myCustomEvent).
data (необязательный) — объект с дополнительной информацией, который будет доступен в обработчике через event.detail.

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

Вызов стандартного события:

var button = document.querySelector('#submitBtn');
$.fire(button, 'click');

Данный код эквивалентен ручному клику по кнопке и инициирует все стандартные обработчики события click.

Вызов пользовательского события с передачей данных:

var card = document.querySelector('.card');
$.fire(card, 'cardSelected', { id: 42, name: 'Product A' });

В обработчике события данные доступны через:

card.addEventListener('cardSelected', function(event) {
    console.log(event.detail.id);   // 42
    console.log(event.detail.name); // 'Product A'
});

Особенности метода

Поддержка цепочек элементов Если передан массивоподобный объект (например, NodeList), метод применит событие ко всем элементам коллекции:

var buttons = document.querySelectorAll('.btn');
$.fire(buttons, 'hover');

Работа с кастомными событиями Любое событие, не поддерживаемое нативно, можно создавать и инициировать через $.fire(). Это особенно полезно при реализации модульной архитектуры или взаимодействии компонентов.
Передача данных через event.detail Любые данные можно вложить в объект detail, что позволяет обработчикам получить контекст события без глобальных переменных.
Совместимость с существующими обработчиками События, вызванные через $.fire(), полностью совместимы с методами addEventListener и removeEventListener, что делает интеграцию с существующим кодом бесшовной.

Примеры сложного взаимодействия

Программное инициирование серии событий:

var form = document.querySelector('#myForm');

$.fire(form, 'formOpened');
$.fire(form.querySelector('input[name="username"]'), 'focus');
$.fire(form.querySelector('button[type="submit"]'), 'click');

В этом примере:

formOpened — кастомное событие, сигнализирующее о появлении формы.
focus — стандартное событие, активирующее поле ввода.
click — имитация нажатия кнопки отправки.

Такой подход позволяет эмулировать последовательность действий пользователя для тестирования или сложной логики интерфейса.

Взаимодействие с делегированными событиями

Bliss.js поддерживает делегирование событий, и $.fire() корректно взаимодействует с ним. Например, если событие делегировано на родителя:

var list = document.querySelector('#todoList');

list.addEventListener('itemChecked', function(event) {
    console.log(event.detail.id + ' checked');
});

var item = list.querySelector('li:first-child');
$.fire(item, 'itemChecked', { id: 1 });

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

Важные замечания

$.fire() инициирует синхронные события. Это значит, что все обработчики будут вызваны сразу, без задержек.
При передаче коллекций событий стоит учитывать порядок элементов, так как события инициируются в последовательности, в которой элементы находятся в NodeList.
Использование $.fire() с нативными событиями не всегда идентично реальному действию пользователя: например, $.fire(input, 'click') вызовет обработчики click, но не активирует фокус на поле ввода в некоторых браузерах.