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

Dom7 — это легковесная библиотека, предоставляющая удобный интерфейс для работы с DOM в стиле jQuery, активно используемая в проектах, таких как Framework7. Одним из ключевых аспектов работы с Dom7 является управление событиями: добавление, удаление и делегирование обработчиков.

Основные методы для работы с событиями

on(eventName, targetSelector, listener, capture) Позволяет привязать обработчик к одному или нескольким событиям. Метод поддерживает делегирование, если указан targetSelector.

Параметры:

  • eventName — строка или массив строк с названиями событий ('click', 'input', 'mouseenter' и т.д.).
  • targetSelector — CSS-селектор для делегирования события. Если не указан, обработчик применяется к самим элементам коллекции.
  • listener — функция-обработчик события.
  • capture — булево значение, указывающее на фазу события (по умолчанию false).

Пример привязки события клика:

const $$ = Dom7;

$$('.button').on('click', function (e) {
    console.log('Кнопка нажата', e.target);
});

Пример делегирования:

$$('.list').on('click', '.list-item', function (e) {
    console.log('Элемент списка выбран:', this.textContent);
});

В этом случае обработчик добавляется на контейнер .list, а срабатывает только при клике на элементы .list-item.

off(eventName, targetSelector, listener, capture) Удаляет ранее привязанный обработчик события. Параметры аналогичны методу on.

Пример удаления обработчика:

function handleClick() {
    console.log('Нажатие удаляется');
}

$$('.button').on('click', handleClick);
$$('.button').off('click', handleClick);

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

once(eventName, targetSelector, listener, capture) Привязывает обработчик, который выполнится один раз, а затем автоматически удаляется. Особенно полезно для однократных действий, например, модальных окон или одноразовых уведомлений.

Пример:

$$('.alert-button').once('click', function () {
    console.log('Сообщение показано один раз');
});

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

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

$$('.button').on('customEvent', function (e, customData) {
    console.log('Полученные данные:', customData);
});

$$('.button').trigger('customEvent', { message: 'Привет' });

Обработчик получает вторым аргументом объект { message: 'Привет' }.

Отмена действий по умолчанию и остановка распространения

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

  • e.preventDefault() — предотвращает стандартное действие браузера (например, переход по ссылке).
  • e.stopPropagation() — останавливает всплытие события вверх по DOM.
  • e.stopImmediatePropagation() — полностью прекращает обработку события, включая другие обработчики на том же элементе.

Пример:

$$('.link').on('click', function (e) {
    e.preventDefault();
    console.log('Переход по ссылке заблокирован');
});

Обработка нескольких событий одновременно

Метод on поддерживает указание нескольких событий через пробел. Это позволяет привязать один обработчик к различным типам событий одновременно:

$$('.input').on('focus blur', function () {
    console.log('Элемент получил или потерял фокус');
});

Контекст this в обработчиках

В обработчиках событий Dom7 this всегда указывает на текущий DOM-элемент, на котором сработало событие. Для делегирования это будет элемент, соответствующий селектору targetSelector.

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

$$('.list').on('click', '.list-item', function () {
    console.log('Выбран элемент:', this.textContent);
});

Это позволяет напрямую работать с атрибутами, классами или текстом выбранного элемента.

Вспомогательные методы для упрощения событийной логики

  • trigger(eventName, data) — программно вызывает событие на элементах коллекции, передавая необязательные данные.
  • triggerHandler(eventName, data) — вызывает событие только для первого элемента, не инициируя стандартное поведение и не всплывая.
  • once — для одноразового события.

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

Практические рекомендации

  • Для динамически создаваемых элементов предпочтительно использовать делегирование через targetSelector.
  • Всегда сохранять ссылки на функции-обработчики, если планируется их удаление через off.
  • Использовать once для событий, которые должны сработать только один раз, чтобы избежать утечек памяти.
  • Программное вызовы событий через trigger позволяют создавать модульный код и отделять логику обработки от реального взаимодействия пользователя.

Dom7 обеспечивает гибкую, но понятную систему работы с событиями, позволяя создавать сложные интерактивные интерфейсы без необходимости прямого управления addEventListener на каждом элементе.

Оглавление