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