События мыши

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

Основные методы для событий мыши

Zepto использует метод .on() для привязки обработчиков событий и .off() для их удаления. События мыши включают:

  • click — срабатывает при клике на элементе.
  • dblclick — двойной клик.
  • mousedown — нажатие кнопки мыши.
  • mouseup — отпускание кнопки мыши.
  • mousemove — перемещение курсора по элементу.
  • mouseenter — курсор вошёл в границы элемента.
  • mouseleave — курсор покинул границы элемента.

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

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

$('#box').on('mouseenter', function() {
    $(this).css('background-color', 'lightblue');
});

$('#box').on('mouseleave', function() {
    $(this).css('background-color', '');
});

Ключевой момент: Zepto автоматически нормализует объект события, предоставляя кросс-браузерный доступ к свойствам события через объект event.

Объект события

Объект события в Zepto расширяет стандартный объект браузера, добавляя удобные свойства:

  • event.type — тип события (click, mousemove и т.д.).
  • event.target — элемент, на котором произошло событие.
  • event.currentTarget — элемент, на котором привязан обработчик.
  • event.pageX и event.pageY — координаты курсора относительно документа.
  • event.preventDefault() — предотвращает стандартное поведение элемента.
  • event.stopPropagation() — останавливает всплытие события.

Пример:

$('#canvas').on('mousemove', function(event) {
    console.log('Координаты курсора:', event.pageX, event.pageY);
});

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

Zepto поддерживает делегирование, что позволяет назначать обработчики на родительские элементы и реагировать на события дочерних. Это эффективно при динамически создаваемых элементах.

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

Особенность: делегирование уменьшает количество обработчиков и улучшает производительность при большом количестве элементов.

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

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

$('#button').one('click', function() {
    alert('Клик выполнен один раз');
});

Работа с координатами мыши

Часто требуется получать точное положение курсора относительно элемента или документа. Zepto предоставляет свойства:

  • event.pageX, event.pageY — координаты относительно документа.
  • event.clientX, event.clientY — координаты относительно видимой области окна.
  • Вычисление позиции относительно элемента:
$('#box').on('mousemove', function(event) {
    var offset = $(this).offset();
    var x = event.pageX - offset.left;
    var y = event.pageY - offset.top;
    console.log('Позиция относительно элемента:', x, y);
});

События перетаскивания (drag)

Zepto не имеет встроенной поддержки drag-and-drop, но комбинация событий mousedown, mousemove и mouseup позволяет реализовать перетаскивание:

var isDragging = false;

$('#draggable').on('mousedown', function(event) {
    isDragging = true;
});

$(document).on('mousemove', function(event) {
    if (isDragging) {
        $('#draggable').css({
            left: event.pageX + 'px',
            top: event.pageY + 'px'
        });
    }
});

$(document).on('mouseup', function() {
    isDragging = false;
});

Совет: закреплять обработчик mousemove на документе, чтобы движение мыши отслеживалось даже за пределами элемента.

События колесика мыши

Для отслеживания прокрутки с помощью колесика можно использовать событие wheel:

$('#container').on('wheel', function(event) {
    console.log('Дельта прокрутки:', event.originalEvent.deltaY);
    event.preventDefault();
});

Примечание: Zepto сохраняет ссылку на исходное событие в event.originalEvent.

Упрощение с псевдонимами

Zepto имеет короткие методы для популярных событий мыши:

  • .click(handler) ≈ .on('click', handler)
  • .mouseenter(handler) ≈ .on('mouseenter', handler)
  • .mouseleave(handler) ≈ .on('mouseleave', handler)

Пример:

$('#button').click(function() {
    console.log('Кнопка нажата (псевдоним)');
});

Совместимость и особенности

  • Zepto предназначен для современных браузеров, и большинство событий мыши работают одинаково.
  • Методы .on() и .off() поддерживают несколько типов событий через пробел.
  • Объект event унифицирован, что минимизирует различия между браузерами.
$('#box').on('mousedown mouseup', function(event) {
    console.log('Событие:', event.type);
});

Практическое использование

События мыши в Zepto позволяют создавать:

  • Интерактивные кнопки и элементы интерфейса.
  • Перетаскиваемые блоки и слайдеры.
  • Игровые элементы с отслеживанием курсора.
  • Панели масштабирования и визуализации данных.

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

Оглавление