Полный список методов событий

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

Метод on()

Синтаксис:

$(selector).on(eventName, targetSelector, handler);
  • eventName — строка с названием события (например, 'click', 'input', 'touchstart').
  • targetSelector — необязательный параметр для делегирования (событие отслеживается на потомках).
  • handler — функция-обработчик события.

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

  • Поддержка множественных событий через пробел: 'click touchstart'.
  • Возможность делегирования событий, что особенно удобно при динамически создаваемых элементах.

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

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

$(document).on('click', '.dynamic-item', function () {
  console.log('Динамический элемент нажат');
});

Метод once()

Синтаксис:

$(selector).once(eventName, targetSelector, handler);
  • Работает аналогично on(), но обработчик вызывается только один раз.
  • Подходит для событий, которые должны произойти однократно (например, первый клик или первая загрузка).

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

$('.button').once('click', function () {
  console.log('Сработало только один раз');
});

Метод off()

Синтаксис:

$(selector).off(eventName, targetSelector, handler);
  • Удаляет ранее добавленный обработчик.
  • Параметры должны совпадать с теми, что были переданы в on().

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

  • Если указать только eventName, удаляются все обработчики данного события.
  • Можно удалить обработчики делегирования, указав targetSelector.

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

function clickHandler() {
  console.log('Нажатие кнопки');
}

$('.button').on('click', clickHandler);
$('.button').off('click', clickHandler); // удаляет только clickHandler

Метод trigger()

Синтаксис:

$(selector).trigger(eventName, eventData);
  • Позволяет программно инициировать событие на выбранных элементах.
  • eventData — объект, который можно передать обработчику.

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

$('.button').on('customEvent', function (e, data) {
  console.log('Событие вызвано', data);
});

$('.button').trigger('customEvent', { value: 123 });

Метод transitionEnd()

Синтаксис:

$(selector).transitionEnd(callback);
  • Обработчик вызывается при завершении CSS-перехода (transition).
  • Удобно для анимаций и динамических стилей.

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

$('.box').transitionEnd(function () {
  console.log('Переход завершен');
});

Метод animationEnd()

Синтаксис:

$(selector).animationEnd(callback);
  • Срабатывает при завершении CSS-анимации (@keyframes).
  • Используется для управления элементами после завершения анимации.

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

$('.box').animationEnd(function () {
  console.log('Анимация завершена');
});

Метод once с делегированием

Dom7 поддерживает делегирование даже в методе once, что позволяет отследить событие на элементах, которые появятся в DOM после инициализации обработчика.

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

$(document).once('click', '.dynamic-item', function () {
  console.log('Событие на динамическом элементе сработало один раз');
});

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

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

Пример:

$('.button').on('click mouseenter mouseleave', function () {
  console.log('Сработало одно из событий');
});

Методы для конкретных событий

  • click(), focus(), blur(), input(), change() — короткие методы, эквивалентные on('event', handler).
  • Поддерживают делегирование и работу с динамическими элементами.

Пример:

$('.input').input(function () {
  console.log('Произошел ввод текста');
});

События мобильных устройств

Dom7 предоставляет поддержку touchstart, touchmove, touchend, tap и других событий сенсорного ввода. Это позволяет создавать мобильные интерфейсы без сторонних библиотек.

Пример:

$('.swipe-area').on('swipeleft swiperight', function (e) {
  console.log('Произошло свайп-событие', e.type);
});

Совмещение методов

Методы событий Dom7 легко комбинируются:

$('.button')
  .on('click', function () { console.log('Click'); })
  .once('mouseenter', function () { console.log('Hover один раз'); })
  .off('click'); // удаляет click

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

Оглавление