Одноразовые обработчики

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

Метод once

Для создания одноразового обработчика используется метод .once(). Его синтаксис почти идентичен .on(), но с ключевой особенностью: после срабатывания события обработчик автоматически снимается.

import $ from 'dom7';

const button = $('.button');

button.once('click', function (event) {
    console.log('Кнопка была нажата один раз');
});

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

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

  • Метод работает со всеми стандартными DOM-событиями: click, mouseenter, keydown и другими.
  • Можно использовать несколько одноразовых обработчиков на одном элементе, они будут выполняться независимо.
  • Метод принимает объект с дополнительными данными через аргумент eventData.

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

Dom7 позволяет передавать дополнительные данные, которые будут доступны в объекте события через свойство event.data.

button.once('click', { message: 'Привет, мир!' }, function (event) {
    console.log(event.data.message);
});

При первом клике в консоль будет выведено "Привет, мир!". После выполнения обработчик удаляется автоматически.

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

.once() поддерживает несколько событий одновременно, разделяя их пробелами:

const input = $('input');

input.once('focus blur', function (event) {
    console.log(`Событие ${event.type} произошло один раз`);
});

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

Вложенные элементы и делегирование

Для работы с делегированными событиями .once() можно использовать второй аргумент — селектор дочернего элемента:

$('.list').once('click', '.item', function (event) {
    console.log('Нажат элемент списка один раз');
});

В этом случае обработчик сработает один раз для каждого дочернего элемента, соответствующего селектору .item. После срабатывания на конкретном элементе обработчик удаляется, но на других элементах списка остается активным.

Совместимость с off

Одноразовый обработчик автоматически удаляется после первого вызова, но при необходимости его можно снять вручную с помощью .off():

function handler(event) {
    console.log('Обработчик срабатывает один раз или снимается вручную');
}

button.once('click', handler);

// Отмена до срабатывания
button.off('click', handler);

Если вызов .off() происходит до первого события, обработчик никогда не выполнится.

Влияние на производительность

Использование .once() полезно для оптимизации:

  • Нет необходимости вручную отслеживать, был ли вызван обработчик.
  • Меньше операций по удалению обработчиков, чем при использовании .on() с последующим .off().
  • Особенно актуально для динамически создаваемых элементов, когда событие нужно обработать только единожды.

Примеры практического применения

  1. Инициализация модального окна только при первом открытии:
$('.modal-button').once('click', function () {
    initializeModal();
});
  1. Первый клик по кнопке для запуска анимации:
$('.start-animation').once('click', function () {
    startAnimation();
});
  1. Первое наведение на элемент для подгрузки данных:
$('.hover-item').once('mouseenter', function () {
    loadDataForItem(this);
});

Использование одноразовых обработчиков упрощает управление событиями, предотвращает повторное выполнение функций и делает код более безопасным и читаемым.

Оглавление