События в JavaScript

Здесь вы можете посмотреть таблицу со сборкой типов событий в языке JavaScript. Типы событий (названия) и их краткое описание. Методы для работы с событиями.

События в JavaScript

Событие – это сигнал от браузера о том, что что-то произошло. Все DOM-узлы подают такие сигналы (хотя события бывают и не только в DOM).

СобытиеОписание
errorНе удалось загрузить ресурс.
abortЗагрузка ресурса была прервана.
loadбраузер загрузил HTML и внешние ресурсы (картинки, стили и т.д.).
DOMContentLoadedкогда HTML загружен и обработан, DOM документа полностью построен и доступен.
beforeunloadпользователь покидает страницу. Мы можем проверить, сохранил ли он изменения и спросить, на самом ли деле он хочет уйти.
unloadпользователь почти ушёл, но мы всё ещё можем запустить некоторые операции, например, отправить статистику.
resizeСобытие запускается когда размер документа был изменён.
orientationchangeСобытие запускается когда изменилась ориентация устройства.
scrollСобытие прокрутки, позволяет реагировать на прокрутку страницы или элемента.
События мыши
clickСобытие происходит когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).
dblclickСобытие возникает когда пользователь дважды нажимает на элемент. Он срабатывает после двух событий click.
contextmenuСобытие происходит происходит, когда кликнули на элемент правой кнопкой мыши.
mouseoverСобытие происходит когда мышь наводится на элемент.
mouseoutСобытие происходит когда мышь покидает элемент.
mousedownСобытие происходит когда нажали кнопку мыши на элементе.
mouseupСобытие происходит когда отжали кнопку мыши на элементе.
mousemoveСобытие происходит при движении мыши.
События клавиатуры
keydownСобытие происходит когда пользователь нажимает клавишу.
keyupСобытие происходит когда пользователь отпускает клавишу.
keypressУстаревшая. Эта функция больше не рекомендуется.
События формы
changeкогда значение элемента изменилось.
inputсрабатывает каждый раз при изменении значения. В отличие от событий клавиатуры, оно работает при любых изменениях значений, даже если они не связаны с клавиатурными действиями: вставка с помощью мыши или распознавание речи при диктовке текста.
focusсрабатывает в момент получения элементом фокуса.
blurсрабатывает когда элемент теряет фокус.
submitпользователь отправил форму <form>
invalidесли элемент не прошел валидацию, только для тега <input>.
storageСобытие возникает когда область хранения была изменена в контексте другого документа.
beforeprintСобытие вызывается когда соответствующий документ готов для печати или предварительного просмотра для печати.
afterprint
События анимации
animationendконец анимации
transitionendСобытие transitionend срабатывает, когда CSS transition закончил свое выполнение
События буфера обмена
copyвозникает, когда пользователь копирует контент элемента. Для всех элементов.
cutвозникает, когда пользователь вырезает контент элемента. Для всех элементов.
pasteвозникает, когда пользователь вставляет контент в элемент. Для всех элементов.
События Drag-and-Drop
drag
dragend
dragenter перетаскиваемый объект перетаскивается над dropArea, делая dropArea целью события drop, если пользователь перетащит его туда.
dragexit
dragleaveперетаскиваемый объект перетащили за пределы dropArea на другой элемент, делая его целью события drop вместо dropArea.
dragover
dragstart
dropпользователь отпустил кнопку мыши, перетаскиваемый объект перетащили на dropArea.

 

Установка слушателя событий

Установку слушателя событий делают с помощью метода addEventListener()

target.addEventListener(type, listener[, options]);
  • type - строка, представляющая тип прослушиваемого события: let eventType = event.type;
  • listener - объект, который принимает уведомление, когда событие указанного типа произошло. Это должен быть объект, реализующий интерфейс EventListener или просто функция JavaScript
  • options (необязательно) - объект options, который определяет характеристики объекта, прослушивающего событие.

Удаление слушателя

Удаление слушателя событий делают с помощью метода removeEventListener()

target.removeEventListener(type, listener[, options]);

removeEventListener удаляет обработчик события зарегистрированный при помощи addEventListener. Обработчик определяется типом события, самой функцией обработки события и дополнительными параметрами переданными при регистрации обработчика.


 

Генерация собственных событий

let event = new Event(type[, options]);
  • type – тип события, строка, например "click" или же любой придуманный нами – "my-event"
  • options – объект с двумя необязательными свойствами: bubbles и cancelable. По умолчанию оба свойства установлены в false: {bubbles: false, cancelable: false}.

Подробно о генерации собственных событий здесь: https://learn.javascript.ru/dispatch-events

 

Записи по теме
JavaScript методы, свойства и события для video и audio
видео и аудио Эти методы, свойства и события позволяют нам управлять элементами audio и video с помощью JavaScript, что позволяет писать собственные видео-плееры и аудио-проигрыватели с любым необходимым функционалом.
Генератор случайных чисел кратных заданному значению
Генератор случайных чисел кратных заданному значению Готовое решение для задач в которых необходимо генерировать случайные числа в заданном диапазоне, при этом чтобы эти числа были кратны какому то заданному числу.
Гугл карта для сайта - Google Maps API
карта Как самостоятельно без дополнительных расширений внедрить на сайте гугл-карту с меткой маркером и описанием в сплывающей подсказке, появляющейся при клике по маркеру.
Математические функции и операторы в JavaScript
математические функции Сборка арифметических операторов и методов чисел в JavaScript. Всё что связано с математикой в JavaScript с примерами функций и решений, собрано вместе на одной странице.
Методы консоли в JavaScript
console.log В JavaScript специально для работы с консолью есть объект console. Ниже описаны доступные для объекта Console методы и приведены несколько примеров их использования.
Методы массивов JavaScript
массив Методы массивов в JavaScript и примеры их использования: push, pop, unshift, shift, split, join, slice, splice, reverse, map, filter, reduce, sort, includes ...

 

 

Комментарии 0

*** чтобы писать комментарии.