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

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

Подключение событий к элементам

В Umbrella JS метод .on() используется для привязки событий к выбранным элементам:

u('button').on('click', function(event) {
    console.log(event.type); // "click"
    console.log(event.target); // элемент button, на котором произошло событие
});

Ключевые моменты:

  • event.type — тип события (например, "click", "input", "keydown").
  • event.target — элемент, на котором произошло событие.
  • this внутри функции-обработчика ссылается на текущий элемент из выборки Umbrella, что обеспечивает удобное манипулирование DOM без необходимости дополнительного поиска элемента.

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

function handleClick(event) {
    console.log('Нажатие кнопки');
}

u('button').on('click', handleClick);
u('button').off('click', handleClick);

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

Umbrella JS поддерживает делегирование через второй аргумент метода .on(), что облегчает обработку динамически добавленных элементов:

u('#list').on('click', 'li', function(event) {
    console.log(event.target.textContent);
});
  • Первый аргумент 'click' — тип события.
  • Второй аргумент 'li' — селектор дочерних элементов, для которых будет срабатывать событие.
  • Функция получает объект события, позволяющий работать с event.target и предотвращать стандартное поведение через event.preventDefault().

Работа с объектом события

Объект события в Umbrella JS передается в обработчик аналогично нативному событию. Основные свойства:

  • event.type — тип события.
  • event.target — элемент, на котором произошло событие.
  • event.currentTarget — элемент, к которому привязан обработчик. Отличие от target важно при делегировании.
  • event.preventDefault() — предотвращает стандартное действие элемента (например, переход по ссылке).
  • event.stopPropagation() — прекращает всплытие события по дереву DOM.
  • event.stopImmediatePropagation() — останавливает всплытие и предотвращает вызов других обработчиков на этом элементе.

Пример:

u('a').on('click', function(event) {
    event.preventDefault(); // ссылка не откроется
    console.log('Клик по ссылке заблокирован');
});

События клавиатуры и мыши

Umbrella JS позволяет удобно работать с объектами событий мыши и клавиатуры:

u(document).on('keydown', function(event) {
    if (event.key === 'Enter') {
        console.log('Нажата клавиша Enter');
    }
});

u('button').on('mousemove', function(event) {
    console.log('Координаты курсора:', event.clientX, event.clientY);
});

Особенности:

  • event.key и event.code — различие между символом и физической клавишей.
  • event.clientX и event.clientY — координаты относительно окна браузера.
  • event.pageX и event.pageY — координаты относительно всего документа.

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

Umbrella JS поддерживает генерацию и прослушивание собственных событий через .trigger():

u('#box').on('customEvent', function(event) {
    console.log('Событие выполнено', event.detail);
});

u('#box').trigger('customEvent', { detail: { message: 'Привет' } });
  • detail — объект с данными, передаваемыми обработчику.
  • .trigger() позволяет создавать гибкие пользовательские сценарии взаимодействия между компонентами без прямой зависимости от DOM.

Совместное использование с методами Umbrella

Объект события тесно интегрирован с другими методами Umbrella:

  • .hide() / .show() — часто применяются в обработчиках событий для динамического управления видимостью.
  • .addClass() / .removeClass() — изменение классов элементов при срабатывании событий.
  • .attr() / .data() — использование данных из элемента или добавление метаданных для дальнейшего реагирования.

Пример динамического поведения:

u('button.toggle').on('click', function(event) {
    u('#panel').toggleClass('active');
    event.preventDefault();
});

Здесь объект события используется для предотвращения стандартного действия кнопки, а Umbrella управляет классами DOM.

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

Umbrella JS не изменяет стандартный объект события, поэтому любые нативные методы (preventDefault, stopPropagation) сохраняют привычное поведение. Встроенные функции .on() и .off() обеспечивают удобный синтаксис без необходимости повторного поиска элементов и ручного назначения обработчиков на каждый элемент коллекции.

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

Оглавление