Метод .on() и его параметры

Метод .on() в Umbrella JS используется для привязки обработчиков событий к выбранным элементам DOM. Это один из ключевых инструментов для работы с динамическим поведением страниц, позволяющий управлять взаимодействием пользователя с элементами без использования громоздкого нативного кода.

Основной синтаксис

u('селектор').on('событие', callback);
  • селектор — строка CSS-селектора или объект DOM, к которому применяется выборка Umbrella.
  • событие — строка с названием события, например 'click', 'mouseover', 'input'. Можно указывать несколько событий через пробел, например 'click mouseover'.
  • callback — функция, которая будет вызвана при срабатывании события. Функция получает объект события в качестве аргумента.

Пример:

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

Привязка нескольких событий

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

u('input').on('focus blur', function(event) {
    console.log('Событие:', event.type);
});

Ключевой момент: объект события (event) всегда содержит свойство type, которое позволяет различать, какое событие произошло, если один обработчик назначен на несколько событий.

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

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

u('ul').on('click', 'li', function(event) {
    console.log('Нажат элемент списка:', this.textContent);
});
  • Первый аргумент — событие (click).
  • Второй аргумент — селектор дочернего элемента ('li').
  • Третий аргумент — callback, в котором this указывает на элемент, вызвавший событие (в данном примере — конкретный <li>).

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

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

Callback-функция получает объект события (Event), который предоставляет доступ к стандартным свойствам:

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

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

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

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

Внутри callback-функции this указывает на элемент DOM, к которому применяется событие (или на делегируемый элемент, если используется селектор второго аргумента). Это упрощает доступ к свойствам элемента без необходимости использовать event.target каждый раз.

u('button').on('click', function() {
    this.disabled = true; // отключение кнопки после клика
});

Отмена привязки событий

Для удаления обработчика используется метод .off(), который принимает те же аргументы, что и .on(). Если указать только событие, удаляются все обработчики этого типа на выбранных элементах.

const callback = function() { console.log('Событие'); };
u('button').on('click', callback);

// позже удаляем
u('button').off('click', callback);

Если обработчик был назначен через делегирование, необходимо точно указать селектор второго аргумента, чтобы корректно удалить привязку.

Практические рекомендации

  • Использовать делегирование для динамических элементов.
  • Объединять несколько событий через пробел для сокращения кода.
  • Всегда проверять контекст this при использовании делегирования.
  • Для управления поведением формы применять event.preventDefault().
  • Для управления всплытием событий применять event.stopPropagation().

Метод .on() в Umbrella JS сочетает простоту синтаксиса с мощными возможностями, позволяя эффективно управлять событиями как для статических, так и динамически изменяемых элементов DOM.

Оглавление