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

Bliss.js — это легковесная JavaScript-библиотека, которая упрощает работу с DOM, событиями и AJAX, сохраняя синтаксис близким к нативному JavaScript. Основой работы с событиями в Bliss.js является объект события, который передаётся в обработчик при срабатывании события. Понимание его структуры и свойств позволяет создавать гибкие и эффективные обработчики.

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

Объект события в Bliss.js расширяет стандартный Event браузера, сохраняя все его стандартные свойства и методы, а также добавляя удобства для работы с DOM. Он автоматически передаётся в обработчик при использовании методов .on() и .delegate().

Ключевые свойства объекта события:

  • type — строка, определяющая тип события (click, keydown, input и т.д.).
  • target — элемент, на котором произошло событие. В отличие от currentTarget, указывает именно на исходный элемент, а не на элемент, к которому привязан обработчик.
  • currentTarget — элемент, к которому привязан обработчик события. Важно при делегировании событий.
  • defaultPrevented — логическое значение, показывающее, был ли вызван метод preventDefault().
  • detail — дополнительная информация, специфичная для пользовательских событий.
  • timeStamp — время в миллисекундах с момента загрузки документа, когда событие было создано.
  • isTrusted — флаг, указывающий, инициировано ли событие пользователем (true) или программно (false).

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

Объект события предоставляет методы, которые позволяют управлять его поведением:

  • preventDefault() — предотвращает выполнение стандартного действия браузера для данного события.
  • stopPropagation() — останавливает всплытие события вверх по дереву DOM.
  • stopImmediatePropagation() — останавливает дальнейшее выполнение всех обработчиков на текущем элементе, предотвращая их вызов после текущего.
  • relatedTarget — используется в событиях mouseover и mouseout для указания элемента, на который или с которого произошло перемещение указателя.

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

Bliss('button').on('click', function(event) {
    console.log('Тип события:', event.type);
    console.log('Элемент, вызвавший событие:', event.target);
    event.preventDefault(); // Отмена стандартного действия
});

В данном примере объект события передаётся как аргумент event, что позволяет получить доступ к свойствам type и target, а также управлять поведением через preventDefault().

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

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

Bliss('#list').delegate('li', 'click', function(event) {
    console.log('Нажат элемент:', event.target.textContent);
});

При делегировании свойства event.target и event.currentTarget особенно полезны: target указывает на элемент <li>, по которому произошёл клик, а currentTarget — на элемент #list, к которому привязан обработчик.

Пользовательские события

Bliss.js позволяет создавать и использовать собственные события через метод .fire(). Объект события при этом может содержать дополнительные данные в свойстве detail.

let el = Bliss('#box');
el.on('customEvent', function(event) {
    console.log('Получены данные:', event.detail);
});
el.fire('customEvent', { foo: 'bar' });

Свойство detail хранит объект { foo: 'bar' }, который передан при вызове события. Это обеспечивает лёгкую передачу данных от источника события к обработчику.

Расширение стандартного объекта события

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

  • Преобразование event.which, event.keyCode и event.charCode для клавиатурных событий.
  • Автоматическое вычисление координат указателя через event.pageX и event.pageY.
  • Поддержку цепочки методов для остановки всплытия и предотвращения действий.

Итоговые моменты

  • Объект события в Bliss.js наследует стандартные свойства и методы Event.
  • Свойства target и currentTarget позволяют различать исходный элемент и элемент обработчика.
  • Методы preventDefault() и stopPropagation() обеспечивают контроль над поведением событий.
  • Делегирование и пользовательские события значительно упрощают взаимодействие с DOM.
  • Свойство detail используется для передачи данных в пользовательских событиях, делая их более гибкими.

Понимание этих особенностей объекта события является фундаментом для эффективного использования Bliss.js в управлении событиями и взаимодействии с DOM.

Оглавление