Привязка обработчиков событий

Bliss.js предоставляет удобный и лаконичный синтаксис для работы с событиями в DOM, позволяя сокращать количество повторяющегося кода и повышать читаемость. Основным инструментом является метод on, который позволяет привязывать обработчики событий к элементам.

// Пример базовой привязки
const button = document.querySelector('#myButton');
Bliss(button).on('click', function(event) {
    console.log('Кнопка нажата', event);
});

Ключевые моменты:

  • Bliss(element) создаёт обёртку над DOM-элементом.
  • Метод on принимает название события и функцию-обработчик.
  • Обработчик получает объект события event, как в стандартном DOM.

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

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

Bliss(button).on('mouseenter mouseleave', function(event) {
    console.log('Событие:', event.type);
});

Такой подход избавляет от необходимости писать отдельные вызовы addEventListener для каждого события.

Делегирование событий

Делегирование позволяет назначать обработчик на родительский элемент, который будет реагировать на события дочерних элементов. Bliss.js реализует это через специальный синтаксис с селектором.

Bliss(document.body).on('click', 'button.dynamic', function(event) {
    console.log('Нажатие на динамическую кнопку:', event.target);
});

Принципы делегирования:

  • Событие ловится на родительском элементе.
  • Проверка цели события (event.target) происходит автоматически.
  • Удобно для элементов, создаваемых динамически.

Удаление обработчиков

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

function handleClick(event) {
    console.log('Клик по кнопке');
}

Bliss(button).on('click', handleClick);

// Позже обработчик можно удалить
Bliss(button).off('click', handleClick);

Особенности:

  • Если функция не передана, off снимает все обработчики данного типа события.
  • Можно использовать для предотвращения утечек памяти при динамическом создании элементов.

Передача данных в обработчик

Bliss.js позволяет передавать дополнительные данные в обработчик через объект data:

Bliss(button).on('click', { info: 'тест' }, function(event) {
    console.log('Данные:', event.data.info);
});
  • event.data содержит объект с дополнительными параметрами.
  • Удобно для передачи состояния без использования глобальных переменных.

Всплытие и предотвращение стандартного поведения

Методы stop и prevent облегчают работу с остановкой распространения событий и отменой действия по умолчанию:

Bliss(button).on('click', function(event) {
    event.stop();      // Останавливает всплытие
    event.prevent();   // Отменяет стандартное действие
});

Сравнение с нативным API:

Bliss.js DOM API
event.stop() event.stopPropagation()
event.prevent() event.preventDefault()

Специальные события

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

  • ready — срабатывает, когда DOM полностью загружен.
  • tap — упрощает обработку касаний на мобильных устройствах.
  • hover — сочетает mouseenter и mouseleave в одном событии.
Bliss(document).on('ready', function() {
    console.log('DOM загружен');
});

Групповая привязка

Можно назначать обработчики сразу для коллекций элементов:

Bliss('button').on('click', function(event) {
    console.log('Кнопка нажата:', event.target);
});
  • Внутри Bliss можно передавать CSS-селекторы.
  • Обработчик автоматически применится ко всем найденным элементам.
  • Экономит время при работе с множеством однотипных элементов.

Итоговая структура использования

  1. Создание обёртки через Bliss(element или селектор).
  2. Привязка событий через .on('event', handler).
  3. При необходимости передача данных или делегирование.
  4. Управление обработчиками через .off.
  5. Использование методов stop и prevent для контроля поведения событий.

Bliss.js упрощает работу с событиями, делая код компактным и читабельным, сохраняя при этом полную функциональность стандартного DOM API.

Оглавление