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

Одноразовые обработчики событий — это функции, которые выполняются только один раз при срабатывании события и автоматически удаляются после первого вызова. В Zepto.js такая функциональность реализуется через метод one, который является упрощённым аналогом jQuery one.

Синтаксис метода one

$(селектор).one(событие, [селектор_вложенного_элемента], обработчик);
  • событие — строка или несколько событий через пробел ('click', 'mouseover' и т.д.).
  • селектор_вложенного_элемента — опциональный аргумент, используется для делегирования событий.
  • обработчик — функция, которая будет вызвана один раз при возникновении события.

Пример простого одноразового обработчика:

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

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

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

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

$('#input').one('focus blur', function() {
    console.log('Поле либо получило, либо потеряло фокус один раз');
});

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

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

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

$('#list').one('click', 'li', function() {
    console.log('Был кликнут элемент списка один раз');
});

Здесь обработчик сработает при первом клике на любой <li> внутри #list. После этого обработчик будет автоматически удалён, что предотвращает накопление лишних слушателей при динамическом добавлении элементов.

Возврат значения из обработчика

Если внутри одноразового обработчика возвращается false, это одновременно предотвращает выполнение стандартного действия и останавливает всплытие события:

$('#link').one('click', function() {
    console.log('Ссылка нажата один раз');
    return false; // предотвращает переход по ссылке
});

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

Внутренний механизм работы

Метод one в Zepto.js реализован через обёртку вокруг обычного обработчика on. При срабатывании события вызывается функция-обёртка, которая:

  1. Выполняет пользовательский обработчик.
  2. Удаляет саму обёртку с элемента через off.

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

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

Одноразовое открытие модального окна:

$('#openModal').one('click', function() {
    $('#modal').show();
    console.log('Модальное окно открыто один раз');
});

Отправка формы только при первом клике:

$('#submit').one('click', function(e) {
    e.preventDefault();
    sendFormData();
    console.log('Форма отправлена один раз');
});

Событие на динамически созданные элементы:

$('#container').one('mouseenter', '.item', function() {
    $(this).addClass('highlight');
    console.log('Элемент подсвечен один раз');
});

Отличия от on

  • on навешивает многоразовый обработчик, который будет выполняться каждый раз при событии.
  • one — одноразовый обработчик, автоматически снимаемый после первого вызова.
  • Использование one снижает риск утечки памяти, особенно при работе с динамическими элементами или частыми событиями.

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

  • Использовать для действий, которые должны выполняться только один раз, например:

    • Инициализация плагина.
    • Первое открытие модального окна.
    • Однократная анимация при загрузке страницы.

  • Совмещать с делегированием, если элементы создаются динамически.

  • Избегать one для событий, которые должны реагировать на каждое действие пользователя.

Метод one делает управление событиями в Zepto.js эффективным и безопасным, позволяя создавать одноразовые действия без необходимости вручную удалять обработчики.

Оглавление