.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)

  • <!-- Это кнопка переключения модального окна -->
<button class="uk-button uk-button-default" type="button" 
        uk-toggle="target: #modal-close-event-example">Открыть модалку</button>

<!-- Это модальное окно -->
<aside id="modal-close-event-example" uk-modal>
    <div class="uk-modal-dialog uk-modal-body uk-text-center">
    	<!-- Это кнопка закрытия с паузой -->
        <button id="myBtnClose" class="uk-button uk-button-primary" type="button">
        	Закрыть после паузы 3 сек.
        </button>
    </div>
</aside>

<script>
	util.on('#myBtnClose', 'click', function () {
		let myModal = util.$('#modal-close-event-example.uk-open')

		setTimeout(() => UIkit.modal(myModal).hide(), 3000)
	});
</script>