.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 коде позволит запустить функцию через определенный промежуток времени, т.е. он отложит выполнение кода на указанное количество времени. В результате при нажатии на кнопку (внутри модалки) установится таймаут, который закроет модальное окно через три секунды.

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

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

	setTimeout(function() { 
		UIkit.modal(myModal).hide()
	}, 3000)
}
  • <!-- Это кнопка переключения модального окна -->
    <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>