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

Объект события в Zepto.js представляет собой объект, который содержит информацию о произошедшем событии и предоставляет методы для управления его поведением. Он является аналогом Event в стандартном DOM API, но Zepto добавляет ряд упрощений и удобных функций для работы с событиями.

Создание и получение объекта события

При привязке обработчика события через методы .on() или .bind(), объект события автоматически передается в качестве первого аргумента функции-обработчика:

$('#button').on('click', function(event) {
    console.log(event.type);    // 'click'
    console.log(event.target);  // элемент, на котором произошло событие
});
  • event — экземпляр объекта события.
  • event.type — тип события (click, keydown, mouseenter и т.д.).
  • event.target — элемент, на котором изначально произошло событие.
  • event.currentTarget — элемент, на котором установлен обработчик.

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

Основные свойства объекта события

  1. type — строка, содержащая тип события.
  2. target — элемент, инициировавший событие.
  3. currentTarget — элемент, на котором висит обработчик.
  4. relatedTarget — вспомогательный элемент для событий, связанных с навигацией курсора (например, mouseover и mouseout).
  5. timeStamp — время возникновения события.
  6. isDefaultPrevented() — метод, возвращающий true, если действие по умолчанию было предотвращено.
  7. isPropagationStopped() — метод, проверяющий, остановлено ли всплытие события.
  8. isImmediatePropagationStopped() — проверяет, была ли остановлена немедленная передача события.

Методы управления событием

Zepto расширяет стандартные методы управления событиями и упрощает их использование.

  • preventDefault() Препятствует выполнению действия по умолчанию для события.
$('a').on('click', function(event) {
    event.preventDefault(); // ссылка не будет переходить
});
  • stopPropagation() Останавливает дальнейшее распространение события по DOM.
$('#inner').on('click', function(event) {
    event.stopPropagation();
});
  • stopImmediatePropagation() Останавливает распространение события и предотвращает вызов других обработчиков на том же элементе.
$('#inner').on('click', function(event) {
    event.stopImmediatePropagation();
});
  • pageX и pageY Координаты курсора относительно страницы для событий мыши. Zepto нормализует эти значения для всех браузеров.
$(document).on('mousemove', function(event) {
    console.log(event.pageX, event.pageY);
});
  • which Номер клавиши для клавиатурных событий или кнопки мыши для мышиных событий. Zepto делает кроссбраузерную нормализацию.

Объект события и делегирование

Zepto поддерживает делегирование событий с помощью передачи селектора вторым аргументом в метод .on():

$('#list').on('click', 'li', function(event) {
    console.log(event.target);        // элемент li, на который кликнули
    console.log(event.currentTarget); // элемент #list
});
  • event.target указывает на элемент, где произошло событие.
  • event.currentTarget всегда ссылается на элемент, на котором привязан обработчик (#list).

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

Дополнительные возможности Zepto

  • data — Zepto позволяет привязать данные к событию через объект event.data при использовании .on():
$('#button').on('click', {key: 'value'}, function(event) {
    console.log(event.data.key); // 'value'
});
  • namespace — Zepto поддерживает пространственные имена для событий:
$('#button').on('click.myNamespace', function(event) {
    console.log('Click в пространстве myNamespace');
});

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

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

Советы по использованию объекта события

  • Для кроссбраузерного доступа к координатам мыши всегда использовать event.pageX и event.pageY.
  • Чтобы предотвратить действия по умолчанию и всплытие одновременно, комбинируют event.preventDefault() и event.stopPropagation().
  • Для делегированных событий анализировать event.target вместо this, так как this ссылается на event.currentTarget.

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

Оглавление