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

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

on(event, [selector], handler)

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

Синтаксис:

$(selector).on(event, [selector], handler)

Параметры:

  • event — строка или несколько событий через пробел, например 'click' или 'mouseover mouseout'.
  • [selector] — опциональный селектор для делегирования.
  • handler — функция, вызываемая при срабатывании события.

Пример:

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

$('ul').on('click', 'li', function() {
    console.log('Нажат элемент списка');
});

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

off(event, [selector], [handler])

Метод off удаляет ранее привязанные обработчики событий.

Синтаксис:

$(selector).off(event, [selector], [handler])

Параметры:

  • event — тип события или несколько типов через пробел.
  • [selector] — селектор делегирования (если использовался при on).
  • [handler] — конкретная функция-обработчик. Если не передана, удаляются все обработчики данного типа.

Пример:

$('#button').off('click'); // удаляет все обработчики click

Удаление через off работает как для одиночного элемента, так и для коллекций элементов.

bind(event, handler) и unbind(event, handler)

bind и unbind являются устаревшими методами привязки и удаления событий, оставлены для совместимости с jQuery. Они работают аналогично on и off, но не поддерживают делегирование.

Пример:

$('#input').bind('focus', function() {
    console.log('Поле в фокусе');
});

$('#input').unbind('focus');

delegate(selector, event, handler) и undelegate(selector, event, handler)

Методы для делегирования событий на родительском элементе. delegate позволяет назначить обработчик на элементы-потомки, даже если они будут добавлены динамически.

Пример:

$('ul').delegate('li', 'click', function() {
    console.log('Нажат элемент списка через delegate');
});

$('ul').undelegate('li', 'click');

Эти методы теперь заменяются использованием on(event, selector, handler) и off(event, selector).

trigger(event, [data]) и triggerHandler(event, [data])

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

  • trigger — вызывает событие и выполняет все связанные обработчики, включая всплытие события.
  • triggerHandler — вызывает событие только на текущем элементе без всплытия.

Пример:

$('#button').on('customEvent', function(e, param) {
    console.log('customEvent с параметром:', param);
});

$('#button').trigger('customEvent', ['данные']);

triggerHandler особенно полезен для внутренних вызовов обработчиков без влияния на DOM-дерево.

Сокращённые методы событий

Zepto предоставляет удобные сокращения для стандартных событий:

  • click(handler) — клики мыши
  • dblclick(handler) — двойной клик
  • mouseenter(handler) / mouseleave(handler) — наведение и уход мыши
  • mousedown(handler) / mouseup(handler) — нажатие и отпускание кнопки мыши
  • mousemove(handler) — движение мыши
  • keydown(handler) / keyup(handler) / keypress(handler) — клавиатурные события
  • focus(handler) / blur(handler) — фокусировка и потеря фокуса
  • change(handler) — изменение значения формы
  • input(handler) — ввод в текстовое поле
  • submit(handler) — отправка формы
  • scroll(handler) — прокрутка
  • resize(handler) — изменение размеров окна

Пример:

$('#input').focus(function() {
    console.log('Фокус на поле ввода');
});

$(window).resize(function() {
    console.log('Окно изменило размер');
});

Эти методы являются просто обёртками для on(event, handler) и делают код более компактным.

one(event, [selector], handler)

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

Пример:

$('#button').one('click', function() {
    console.log('Этот обработчик сработает один раз');
});

Поддерживает делегирование аналогично on.

Работа с объектом события

Все обработчики получают объект события e, который содержит полезные свойства:

  • e.type — тип события
  • e.target — элемент, на котором событие произошло
  • e.currentTarget — элемент, на котором зарегистрирован обработчик
  • e.preventDefault() — предотвращает стандартное поведение
  • e.stopPropagation() — останавливает всплытие события

Пример:

$('#link').on('click', function(e) {
    e.preventDefault();
    console.log('Ссылка кликнута, переход отменён');
});

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

  • Zepto минимизирует накладные расходы на события, сохраняя интерфейс совместимым с jQuery.
  • Делегирование через селекторы работает как для статических, так и для динамически добавленных элементов.
  • Все методы поддерживают цепочки вызовов (chainable), что упрощает написание компактного кода.
  • Поддерживаются кастомные события (trigger, on), что позволяет создавать собственные события для компонентов интерфейса.

Эта коллекция методов покрывает весь набор инструментов для работы с событиями в Zepto.js, включая привязку, удаление, делегирование, программное вызовы событий и обработку стандартных событий DOM. Она обеспечивает гибкость и минимализм при разработке интерактивного фронтенда.

Оглавление