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

В JavaScript взаимодействие с пользовательским интерфейсом, сетью и другими внешними источниками событий строится вокруг объекта события (Event). Этот объект является ключевым элементом при обработке событий и содержит всю необходимую информацию о произошедшем событии. В библиотеке Cash работа с объектом события максимально упрощена, сохраняя привычный API, знакомый по jQuery.

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

  1. type Строка, указывающая тип события. Например, 'click', 'keydown', 'submit'. Это свойство позволяет определить, какое именно событие произошло и использовать его для условной логики.

    $('button').on('click', function(e) {
    console.log(e.type); // "click"
});

  2. target Содержит ссылку на элемент, на котором произошло событие. Отличие от currentTarget в том, что target всегда указывает на элемент, на котором реально инициировалось событие, даже если событие всплывало.

    $('.list').on('click', function(e) {
    console.log(e.target); // конкретный <li> внутри .list
    console.log(e.currentTarget); // элемент .list
});

  3. currentTarget Элемент, к которому привязан обработчик. В Cash это свойство используется для точного указания контекста функции обработчика.

  4. bubbles Булевое значение, показывающее, распространяется ли событие по DOM-дереву (всплывает). Если true, событие может подниматься к родительским элементам.

  5. cancelable Булевое свойство, которое указывает, можно ли отменить стандартное поведение события через метод preventDefault().

  6. defaultPrevented Булевое значение, которое становится true, если вызван preventDefault(). Позволяет проверять, было ли отменено стандартное поведение.

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

  1. preventDefault() Отменяет стандартное действие браузера, связанное с событием. Например, для ссылки это предотвращает переход по href.

    $('a').on('click', function(e) {
    e.preventDefault();
    console.log('Переход отменен');
});

  2. stopPropagation() Останавливает дальнейшее распространение события по DOM. Это важно при работе с вложенными элементами.

    $('.parent').on('click', function(e) {
    e.stopPropagation();
    console.log('Событие не всплывет дальше');
});

  3. stopImmediatePropagation() Останавливает всплытие события и предотвращает вызов других обработчиков на том же элементе. Используется в сложных сценариях, когда несколько обработчиков привязаны к одному элементу.

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

  • События мыши (MouseEvent) clientX, clientY – координаты курсора относительно области просмотра браузера. pageX, pageY – координаты относительно всей страницы. button – какая кнопка мыши была нажата.

  • События клавиатуры (KeyboardEvent) key – символ нажатой клавиши. code – физическая клавиша на клавиатуре. ctrlKey, altKey, shiftKey, metaKey – состояния модификаторов.

  • События формы (InputEvent, ChangeEvent) data – новые данные, введённые пользователем. inputType – тип изменения (insertText, deleteContentBackward и т.д.).

Кросс-браузерная совместимость

Cash обеспечивает нормализацию объекта события, скрывая различия между браузерами. Например, свойства which, keyCode и charCode, которые ранее различались, автоматически корректируются и предоставляются в единообразном виде.

$('input').on('keydown', function(e) {
    console.log(e.key); // всегда возвращает символ клавиши
});

Доступ к объекту события внутри обработчика

При использовании Cash объект события передается первым аргументом функции обработчика. Это позволяет сразу работать со всеми его свойствами и методами.

$('.btn').on('click', function(event) {
    event.preventDefault();
    console.log('Тип события:', event.type);
    console.log('Цель события:', event.target);
});

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

Cash поддерживает делегирование через второй аргумент метода .on(). В этом случае объект события позволяет точно определить элемент-источник, даже если обработчик привязан к родителю:

$('.list').on('click', 'li', function(e) {
    console.log('Нажат элемент:', e.target.textContent);
});

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

Вывод

Объект события в Cash объединяет в себе удобство работы с DOM и богатый функционал стандартного JavaScript. Понимание его свойств и методов позволяет управлять поведением элементов, контролировать всплытие и отменять стандартные действия браузера без необходимости глубокого погружения в нативный DOM API.

Оглавление