Базовый синтаксис привязки событий

Umbrella JS предоставляет лёгкий и компактный синтаксис для работы с DOM, включая привязку и управление событиями. Основным методом для этого является .on(), который позволяет навешивать обработчики на выбранные элементы, аналогично addEventListener в чистом JavaScript, но с удобной цепочкой вызовов и универсальной поддержкой коллекций элементов.

Навешивание событий

Метод .on() имеет следующую базовую форму:

u('селектор').on('событие', function(event) {
    // тело обработчика
});

Примеры:

u('button').on('click', function(e) {
    console.log('Кнопка нажата');
});

Можно навешивать обработчики на несколько событий одновременно, перечисляя их через пробел:

u('input').on('focus blur', function(e) {
    console.log('Фокус или потеря фокуса');
});

Снятие событий

Для удаления обработчиков используется метод .off():

u('селектор').off('событие', функция);

Если функция не указана, все обработчики данного типа удаляются:

u('button').off('click'); // удаляет все клики с кнопок

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

Umbrella JS поддерживает делегирование событий через дополнительный параметр селектор:

u('parent').on('click', 'child', function(e) {
    console.log('Клик по дочернему элементу');
});

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

Специальные события

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

  • .click(fn) — привязка события click
  • .focus(fn) — событие focus
  • .blur(fn) — событие blur
  • .keydown(fn) — событие keydown
  • .keyup(fn) — событие keyup

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

u('input').focus(function() {
    console.log('Поле ввода в фокусе');
});

Контекст обработчика

Внутри функции обработчика this ссылается на текущий DOM-элемент, а объект события передаётся как первый аргумент:

u('li').on('click', function(event) {
    console.log(this); // сам элемент <li>
    console.log(event.type); // тип события
});

Передача дополнительных данных

Umbrella JS позволяет передавать дополнительные параметры в обработчик через объект данных:

u('button').on('click', { user: 'admin', id: 42 }, function(e) {
    console.log(e.data.user); // 'admin'
});

Всплытие и отмена действий

Объект события event поддерживает стандартные методы:

  • event.preventDefault() — предотвращает стандартное поведение элемента
  • event.stopPropagation() — останавливает всплытие события
u('a').on('click', function(e) {
    e.preventDefault(); // ссылка не будет переходить
});

Навешивание обработчиков на коллекцию элементов

Методы .on() и .off() автоматически применяются ко всем элементам, выбранным селектором:

u('li').on('mouseenter', function() {
    this.style.backgroundColor = 'yellow';
});

Нет необходимости вручную перебирать элементы через циклы или forEach, что делает код более компактным и читаемым.

Особенности работы с динамическим DOM

При добавлении новых элементов в DOM после первоначальной привязки событий обычный .on() без делегирования не будет работать. Для таких случаев рекомендуется использовать делегирование через родительский элемент:

u('#list').on('click', 'li', function() {
    console.log('Клик по динамическому элементу списка');
});

Комбинирование с другими методами Umbrella JS

Привязка событий часто используется в связке с методами манипуляции DOM .addClass(), .removeClass(), .toggleClass(), .html(), .text(), .attr():

u('button').on('click', function() {
    u(this).toggleClass('active');
    u('#output').text('Состояние изменено');
});

Такой подход позволяет писать лаконичный код без необходимости возвращаться к чистому querySelector или addEventListener для каждого элемента.

Итоговый синтаксический стиль

  • u(‘селектор’).on(‘событие’, handler); — навесить событие
  • u(‘селектор’).off(‘событие’, handler); — снять событие
  • u(‘селектор’).on(‘событие’, ‘дочерний селектор’, handler); — делегирование
  • u(‘селектор’).click(handler); — краткая форма для клика
  • this внутри handler — текущий DOM-элемент

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

Оглавление