События в js

Важной особенностью языка JavaScript является его асинхронность. Это стало возможно благодаря событиям js.

Добавление события:

Способ
1
<span onclick="alert('Пример'); return false;">text</span>
<span onclick="alert('Пример'); return false;">text</span>

способ

var a = document.getElementById('block');
 
//вешаем на него событие
a.onclick = function() {
    alert('Пример');
    return false;
}

способ
1 2
div.addEventListener('click', listener); // добавление события div.removeEventListener('click', listener); // удаление события
div.addEventListener('click', listener); // добавление события div.removeEventListener('click', listener); // удаление события

Объект Event для событий

Нужен для описания произошедшего события

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

пример:

let i = querySelector(".inputtext");
i.addEventListener('invalid', function(){
   if(i.validity.tooLong){
      i.setCustomValidity("превышено максимальное количество символов");
   }
});