.on()

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

События
on(...args)
Параметр Тип По умолчанию Описание
targets String null Элемент HTML.
type String null Тип события, например click, scroll и т.д.
selector String null Используется для динамически добавляемых элементов HTML.
listener Function null Функция обратного вызова (callback function)
для запуска какого-то кода.
useCapture Boolean false Указывает, что события этого типа будут отправлены зарегистрированному listener перед отправкой любому EventTarget под ним в дереве DOM.

Использование

Для примера используем компонент Lightbox.

<div id="example-on">
    <a class="uk-button uk-button-default" href="/img/photo.jpg">Открыть Лайтбокс</a>
</div>
var element = util.$('#example-on');
var lightbox = UIkit.lightbox(element);

// Реакция на событие
util.on('#example-on a', 'click', function () {
  lightbox.show(0);
});

// Реакция на событие, которое прикреплено к динамически создаваемому элементу HTML
util.on(document, 'shown', '.uk-lightbox.uk-open', function () {
  console.log('Лайтбокс отображается!');
});
Результат
'Лайтбокс отображается!'

util.on(document, 'DOMContentLoaded', function (event) {
  console.log("DOM полностью загружен и проанализирован");
});
Результат
DOM полностью загружен и проанализирован

Закрытие модального окна после клика с задержкой

Для примера будем использовать компонент Modal, который имеет метод .hide() для скрытия открытого модального окна. Поместим кнопку, которая будет закрывать модальное окно через 3 секунды после клика по ней. Метод setTimeout() в JavaScript коде позволит запустить функцию через определенный промежуток времени, т.е. он отложит выполнение кода на указанное количество времени. В результате при нажатии на кнопку (внутри модалки) установится таймаут, который закроет модальное окно через три секунды.

function closeModalTimeout() {
	let myModal = document.querySelector('#modal-close-event-example.uk-open')

	setTimeout(function() { 
		UIkit.modal(myModal).hide()
	}, 3000)
}

util.on('#myBtnClose', 'click', closeModalTimeout)