Вход

События в js

События в js

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

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

  1. Способ
    1
    
    <span onclick="alert('Пример'); return false;">text</span>
  2. способ
    1
    2
    3
    4
    5
    6
    7
    
    var a = document.getElementById('block');
     
    //вешаем на него событие
    a.onclick = function() {
        alert('Пример');
        return false;
    }
  3. способ
    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

Поведение события

Событие может распространяться следующим образом:

  1. всплывать вверх по dom дереву (по умолчанию)
  2. выполняться захват от верхнего уровня 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 /

75 Views /

0 Comment
Ilya Web developer
Author

«Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете.»Martin Golding

Отправить ответ

  Получать уведомления о новых комментариях  
Уведомлять