Пользовательские события

Bliss.js — это компактная и высокоэффективная библиотека для работы с DOM и событиями в JavaScript. Одной из её сильных сторон является удобная работа с пользовательскими событиями, которые позволяют создавать собственные события и управлять ими так же просто, как стандартными браузерными событиями.

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

В Bliss.js для создания собственного события используется метод trigger. Любой элемент DOM может инициировать пользовательское событие с помощью этого метода:

// Создание пользовательского события 'dataReady' с передачей данных
let data = { user: 'Alice', id: 42 };
document.querySelector('#app').trigger('dataReady', [data]);

Ключевой момент: метод trigger принимает имя события и массив аргументов, которые будут переданы обработчикам. В отличие от стандартного CustomEvent, Bliss.js упрощает синтаксис, исключая необходимость создавать объект события вручную.

Подписка на пользовательские события

Подписка осуществляется через метод on, аналогично стандартным событиям DOM:

document.querySelector('#app').on('dataReady', function(event, data) {
    console.log('Данные получены:', data);
});

Особенности подписки в Bliss.js:

  • Порядок вызова обработчиков сохраняется: обработчики вызываются в том порядке, в котором они были зарегистрированы.
  • Поддержка передачи аргументов: второй и последующие параметры функции — это данные, переданные через trigger.
  • Контекст this внутри обработчика указывает на DOM-элемент, на котором событие было вызвано.

Удаление пользовательских событий

Метод off позволяет полностью снять обработчики события или удалить конкретный обработчик:

function handleData(event, data) {
    console.log(data);
}

let app = document.querySelector('#app');
app.on('dataReady', handleData);

// Удаление конкретного обработчика
app.off('dataReady', handleData);

// Удаление всех обработчиков события
app.off('dataReady');

При использовании off важно указывать ту же функцию, которая была передана в on, иначе обработчик останется активным.

Делегирование пользовательских событий

Bliss.js поддерживает делегирование даже для кастомных событий. Это позволяет навешивать обработчик на родительский элемент и отслеживать события, возникающие на дочерних элементах:

document.body.on('dataReady', '#app .child', function(event, data) {
    console.log('Дочерний элемент инициировал событие:', data);
});

Преимущества делегирования:

  • Уменьшение количества обработчиков в DOM.
  • Автоматическое отслеживание динамически добавленных элементов.
  • Единая точка управления событиями.

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

Передача данных осуществляется через массив аргументов в trigger. Любые объекты JavaScript могут быть переданы:

let user = { name: 'Bob', age: 30 };
document.querySelector('#app').trigger('userUpdate', [user, true]);

В обработчике данные будут доступны как отдельные параметры:

document.querySelector('#app').on('userUpdate', function(event, user, isActive) {
    console.log(user.name, 'активен:', isActive);
});

Встроенные методы для распространённых сценариев

Bliss.js предоставляет удобные вспомогательные методы для работы с пользовательскими событиями:

  • one(eventName, handler) — обработчик будет вызван только один раз.
  • triggerHandler(eventName, args) — вызывает событие только для данного элемента, не всплывая по DOM.

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

document.querySelector('#app').one('init', function() {
    console.log('Инициализация выполнена только один раз');
});

document.querySelector('#app').trigger('init'); // Вызовет обработчик
document.querySelector('#app').trigger('init'); // Игнорируется

Всплытие пользовательских событий

По умолчанию пользовательские события в Bliss.js всплывают по DOM, что позволяет организовывать централизованную обработку. Всплытие можно остановить с помощью стандартного метода stopPropagation:

document.querySelector('#app').on('customEvent', function(event) {
    event.stopPropagation();
    console.log('Событие обработано без всплытия');
});

Совместимость с нативными событиями

Bliss.js интегрирует пользовательские события с нативными событиями браузера. Это позволяет комбинировать стандартные события и кастомные, создавая сложные логики взаимодействия:

document.querySelector('#app').on('click', function() {
    this.trigger('clicked');
});

document.querySelector('#app').on('clicked', function() {
    console.log('Элемент был нажат и событие кастомное сработало');
});

Таким образом, пользовательские события в Bliss.js становятся мощным инструментом для построения модульной и динамичной логики интерфейса. Они объединяют простоту синтаксиса, гибкость передачи данных и совместимость с DOM, делая разработку интерактивных приложений более прозрачной и управляемой.

Оглавление