События в js
Важной особенностью языка JavaScript является его асинхронность. Это стало возможно благодаря событиям js.
Добавление события:
- Способ
1
<span onclick="alert('Пример'); return false;">text</span>
- способ
1 2 3 4 5 6 7
var a = document.getElementById('block'); //вешаем на него событие a.onclick = function() { alert('Пример'); return false; }
- способ
1 2
div.addEventListener('click', listener); // добавление события div.removeEventListener('click', listener); // удаление события
Объект Event для событий
Нужен для описания произошедшего события
1 2 3 4 5 6 | eventTarget.addEventListener("keydown", evt => { if (evt.isComposing || evt.keyCode === 229) { return; } // do something }); |
Параметр «evt» или «e» именовать именно так, чтобы избежать проблем с ie
Поведение события
Событие может распространяться следующим образом:
- всплывать вверх по dom дереву (по умолчанию)
- выполняться захват от верхнего уровня dom до элемента по которому был выполнен клик
За способ распространения события отвечает 3 параметр метода addEventListener(). Это можно увидеть в свойстве path для evt
Проверка форм на валидность
validity — событие проверки на валидность формы
Объект validityState
Позволяет отловить ошибку в валидности формы
Свойства проверки на валидность:
badInput — введено не правильное значение
customError — логическое значение, указывающее, установлено ли в настраиваемом сообщении о достоверности элемента
patternMismatch — не соответствует значению
rangeOverflow — больше максимального значения
rangeUnderflow — меньше минимального значения
stepMismatch — недопустимое значение
tooLong — больше значение
tooShort — короткое значение
valid — валидное поле
valueMissing — нет значения
Своё значение задаётся через метод: setCustomValidity()
пример:
1 2 3 4 5 6 | let i = querySelector(".inputtext"); i.addEventListener('invalid', function(){ if(i.validity.tooLong){ i.setCustomValidity("превышено максимальное количество символов"); } }); |
24 сентября 2020 /
2520 Views /
0 Comment