События активности
Чтобы можно было отреагировать на изменение активности контрола, предоставляется 2 события:
- activated (контрол активирован)
- deactivated (контрол деактивирован)
На эти события можно подписаться только у контролов, так как только контрол обладает состоянием активности.
Вычисление активности контролов вслед за изменением фокуса
Пересчет состояний активности базируется на положении фокуса на странице. Изменение положения фокуса влечет за собой анализ состояний активности контролов и нотификацию событий активности. При этом на контролах, которые не теряли активность, не будет вызвано событий активности.
При переводе фокуса с элемента input 1-1-1
на элемент input 1-2-1
будут вызваны события фокусов и события активности. Сначала сработают нативные события, а потом события активности.
- Событие потери фокуса
focusout
сработает на элементах:input 1-1-1
div 1-1
div 1
- Событие получения фокуса
focusin
сработает на элементах:input 1-2-1
div 1-2
div 1
У контрола 1 события активности deactivated и activated вызваны не будут, потому что он не деактивировался и не активировался. Он как был активирован, так и остался активирован (по 2 признаку). Активация переходила среди его дочерних элементов.
- Событие
deactivated
сработает:на контроле 1-1-1
контроле 1-1
- Событие
activated
сработает:- на контроле
1-2-1
- контроле
1-2
- на контроле
Событие activated
Если контрол становится активным, на нем срабатывает событие activated. Событие также будет содержать дополнительную информацию:
- isTabPressed — значение
true
означает, что активность перешла переходом по Tab, значениеfalse
означает, что активность перешла по клику. - isShiftKey — значение
true
означает, что активность перешла переходом по Tab в обратном порядке (с использованием клавишиshift
). - keyPressedData - если фокус происходит во время нажатия какой-либо клавиши (не только Tab), в событие отправляется информация об этом нажатии (название клавиши и т.д.).
В качестве примера очистим значение поля ввода, если оно было активировано переходом по Tab.
Шаблон контрола Example
:
<!-- WML -->
<Controls.input:Number bind:value="value" on:activated="clearValue()"/>
Контроллер шаблона Example
:
// TypeScript
clearValue(event, config): void {
if (config.isTabPressed) {
this.value = '';
}
}
Событие deactivated
Если контрол становится неактивным, на нем срабатывает событие deactivated. Событие также будет содержать дополнительную информацию:
- isTabPressed — значение
true
означает, что активность перешла переходом по Tab, значениеfalse
означает, что активность перешла по клику. - isShiftKey — значение
true
означает, что активность перешла переходом по Tab в обратном порядке (с использованием клавишиshift
).
В качестве примера провалидируем введенное значение в поле ввода при деактивации.
Шаблон контрола Example
:
<!-- WML -->
<Controls.input:Number bind:value="value" on:deactivated="validate()"/>
Контроллер шаблона Example
:
// TypeScript
validate(event, config): void {
if (!this.value) {
this.showWarning('Необходимо ввести значение');
}
}