Какие типы событий (ивентов) существуют?

Существует множество типов событий, но наиболее распространенные можно сгруппировать по категориям:

• События пользовательского интерфейса:

  • click: Нажатие кнопки мыши над элементом.
  • dblclick: Двойное нажатие кнопки мыши над элементом.
  • mousedown: Нажатие кнопки мыши (еще до отпускания).
  • mouseup: Отпускание кнопки мыши.
  • mousemove: Движение указателя мыши над элементом.
  • mouseover: Наведение указателя мыши на элемент.
  • mouseout: Увод указателя мыши с элемента.
  • mouseenter: Наведение указателя мыши на элемент (не всплывает из дочерних элементов).
  • mouseleave: Увод указателя мыши с элемента (не всплывает из дочерних элементов).
  • contextmenu: Вызов контекстного меню правой кнопкой мыши.

• События клавиатуры:

  • keydown: Нажатие клавиши (еще до отпускания).
  • keyup: Отпускание клавиши.
  • keypress: Нажатие и удержание клавиши, генерирующее символьные входные данные. (Устарело, предпочтительнее использовать keydown и keyup).

• События формы:

  • submit: Отправка формы.
  • change: Изменение значения элемента формы (например, <input>, <select>, <textarea>).
  • input: Изменение значения элемента формы, когда его содержимое интерактивно меняется пользователем.
  • focus: Получение элементом фокуса.
  • blur: Потеря элементом фокуса.
  • cut: Вырезание содержимого.
  • copy: Копирование содержимого.
  • paste: Вставка содержимого.

• События загрузки и ошибок:

  • load: Завершение загрузки ресурса (например, изображения, скрипта, страницы).
  • unload: Уход со страницы.
  • beforeunload: Попытка покинуть страницу (позволяет отобразить диалог подтверждения).
  • error: Произошла ошибка при загрузке ресурса или выполнении скрипта.

• События фокуса (FocusEvent):

  • focusin: Элемент или любой его дочерний элемент получает фокус.
  • focusout: Элемент или любой его дочерний элемент теряет фокус.

• События прокрутки:

  • scroll: Прокрутка элемента.

• События касания (для сенсорных устройств):

  • touchstart: Палец касается экрана.
  • touchend: Палец отрывается от экрана.
  • touchmove: Палец движется по экрану.
  • touchcancel: Событие касания прервано (например, из-за вызова системного меню).

• События перетаскивания (Drag and Drop):

  • dragstart: Начало перетаскивания.
  • drag: Элемент перетаскивается.
  • dragend: Окончание перетаскивания.
  • dragenter: Элемент перетащен над допустимой зоной сброса.
  • dragleave: Элемент перетащен из допустимой зоны сброса.
  • dragover: Элемент перетащен над допустимой зоной сброса (требует отмены стандартного поведения для разрешения сброса).
  • drop: Элемент сброшен на допустимую зону сброса.

• События истории браузера:

  • popstate: Изменение активной записи истории при навигации (например, нажатие кнопки "Назад/Вперед").

• События изменения размера окна:

  • resize: Изменение размера окна браузера.

Это не исчерпывающий список, но он охватывает наиболее часто встречающиеся и важные типы событий в веб-разработке. Понимание их назначения и поведения является ключевым для создания интерактивных веб-приложений.