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

В библиотеке Dom7, как и в стандартном DOM, объект события представляет собой данные о происходящем событии, позволяющие реагировать на действия пользователя или изменения состояния элементов. Dom7 предоставляет упрощённый и удобный доступ к этим объектам, сохраняя при этом совместимость с нативными событиями JavaScript.

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

Объект события в Dom7 наследует стандартные свойства JavaScript Event:

  • type — тип события (например, 'click', 'input', 'submit').
  • target — элемент, на котором произошло событие.
  • currentTarget — элемент, к которому привязан обработчик.
  • timeStamp — время, когда событие было сгенерировано.
  • bubbles — булевое значение, указывающее, всплывает ли событие.
  • cancelable — указывает, можно ли отменить действие по умолчанию.

Dom7 дополняет эти свойства некоторыми удобными методами и сокращениями, упрощая работу с событиями.

Преобразование объекта события

В Dom7 обработчик события получает объект события как первый аргумент функции:

import $ from 'dom7';

$('button').on('click', function (event) {
    console.log(event.type);        // 'click'
    console.log(event.target);      // DOM-элемент кнопки
    console.log(event.currentTarget); // тот же DOM-элемент, к которому привязан обработчик
});

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

Методы объекта события

Dom7 расширяет стандартные методы:

  • event.preventDefault() — предотвращает выполнение действия по умолчанию. Например, для формы это отменяет отправку.
  • event.stopPropagation() — предотвращает дальнейшее всплытие события по DOM.
  • event.stopImmediatePropagation() — останавливает всплытие и предотвращает вызов других обработчиков на том же элементе.
$('a').on('click', function (event) {
    event.preventDefault(); // ссылка не перейдет по href
});

Специфические свойства Dom7

Dom7 добавляет удобные свойства для быстрого доступа к информации о событии:

  • event.$target — объект Dom7, обёртка над event.target, позволяющая использовать методы библиотеки напрямую.
  • event.$currentTarget — аналогично, обёртка над currentTarget.

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

$('ul li').on('click', function (event) {
    event.$target.addClass('active'); // добавление класса через Dom7
});

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

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

$('ul').on('click', 'li', function (event) {
    console.log(event.target);  // конкретный <li>, по которому кликнули
    console.log(event.currentTarget); // <ul>, к которому привязан обработчик
});

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

Dom7 упрощает работу с событиями мыши и сенсорных устройств, объединяя обработку click, touchstart, touchend и других событий. В объекте события доступны стандартные координаты:

  • event.pageX / event.pageY — координаты курсора относительно документа.
  • event.clientX / event.clientY — координаты относительно области просмотра.
  • event.touches / event.changedTouches — массивы точек касания для мобильных устройств.
$('.box').on('touchstart', function (event) {
    console.log(event.touches[0].pageX, event.touches[0].pageY);
});

Особенности работы с this

В обработчиках Dom7 this всегда ссылается на DOM-элемент, к которому привязан обработчик, а не на объект события. Для получения Dom7-обёртки можно использовать event.$currentTarget:

$('.item').on('click', function (event) {
    $(this).addClass('clicked');       // через this
    event.$currentTarget.removeClass('active'); // через объект события
});

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

Dom7 позволяет создавать и триггерить собственные события через метод .trigger(). При этом объект события может содержать дополнительные данные, передаваемые вторым аргументом:

const data = { message: 'Hello' };
$('#button').trigger('customEvent', data);

$('#button').on('customEvent', function (event, extraData) {
    console.log(extraData.message); // 'Hello'
});

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

Практические советы

  • Всегда использовать event.preventDefault() для отмены стандартного поведения форм и ссылок.
  • Делегирование событий упрощает работу с динамически добавляемыми элементами.
  • Для удобного доступа к методам Dom7 лучше использовать $target и $currentTarget.
  • При работе с touch-событиями учитывать различия между touches, targetTouches и changedTouches.

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

Оглавление