DOM Event позволяют JavaScript добавлять прослушиватели событий или обработчики событий к элементам HTML.
Чтобы узнать больше о событиях, прочтите наш Учебник по событиям JavaScript.
Примеры Event
В HTML onclick — это прослушиватель событий, myFunction — обработчик событий:
<button onclick="myFunction()">Нажми на меня</button>
В JavaScript click — это событие, myFunction — обработчик событий:
button.addEventListener("click", myFunction);
| Событие | Происходит, когда | Принадлежит |
|---|---|---|
| abort | Загрузка носителя прерывается | UiEvent, Event |
| afterprint | Печать страницы началась | Event |
| animationend | CSS-анимация завершена. | AnimationEvent |
| animationiteration | CSS-анимация повторяется | AnimationEvent |
| animationstart | CSS-анимация началась | AnimationEvent |
| beforeprint | Страница сейчас будет напечатана | Event |
| beforeunload | Перед выгрузкой документа | UiEvent, Event |
| blur | Элемент теряет фокус | FocusEvent |
| canplay | Браузер может начать воспроизведение медиафайла (имеет достаточную буферизацию для начала) | Event |
| canplaythrough | Браузер может воспроизводить медиа без остановки на буферизацию | Event |
| change | Содержимое элемента формы изменилось | Event |
| click | Нажатие на элемент | MouseEvent |
| контекстное меню | Элемент щелкните правой кнопкой мыши, чтобы открыть контекстное меню | MouseEvent |
| copy | Содержимое элемента копируется | ClipboardEvent |
| cut | Содержимое элемента вырезается | ClipboardEvent |
| dblclick | Элемент дважды щелкнут | MouseEvent |
| drag | Элемент перетаскивается | DragEvent |
| dragend | Перетаскивание элемента завершено | DragEvent |
| dragenter | Перетаскиваемый элемент попадает в цель перетаскивания | DragEvent |
| dragleave | Перетаскиваемый элемент покидает цель перетаскивания | DragEvent |
| dragover | Перетаскиваемый элемент находится над целью перетаскивания | DragEvent |
| dragstart | Перетаскивание элемента началось | DragEvent |
| drop | Перетаскиваемый элемент сбрасывается на цель | DragEvent |
| durationchange | Длительность медиа изменена | Event |
| ended | Медиа достигло конца ("спасибо за внимание") | Event |
| error | Произошла ошибка при загрузке файла | ProgressEvent, UiEvent, Event |
| focus | Элемент получает фокус | FocusEvent |
| focusin | Элемент вот-вот получит фокус | FocusEvent |
| focusout | Элемент вот-вот потеряет фокус | FocusEvent |
| fullscreenchange | Элемент отображается в полноэкранном режиме | Event |
| fullscreenerror | Элемент не может быть отображен в полноэкранном режиме. | Event |
| hashchange | Были внесены изменения в якорную часть URL-адреса. | HashChangeEvent |
| input | Элемент получает пользовательский ввод | InputEvent, Event |
| invalid | Элемент недействителен | Event |
| keydown | Ключ не работает | KeyboardEvent |
| keypress | Ключ нажат | KeyboardEvent |
| keyup | Ключ отпущен. | KeyboardEvent |
| load | Объект загружен | UiEvent, Event |
| loadeddata | Медиаданные загружены | Event |
| loadedmetadata | Загружаются метаданные (например, размеры и продолжительность). | Event |
| loadstart | Браузер начинает поиск указанного носителя | ProgressEvent |
| message | Сообщение получено через источник события | Event |
| mousedown | Кнопка мыши нажата над элементом | MouseEvent |
| mouseenter | Указатель перемещается на элемент | MouseEvent |
| mouseleave | Указатель перемещен за пределы элемента | MouseEvent |
| mousemove | Указатель перемещается над элементом | MouseEvent |
| mouseover | Указатель перемещается на элемент | MouseEvent |
| mouseout | Указатель перемещен за пределы элемента | MouseEvent |
| mouseup | A user releases a mouse button over an element | MouseEvent |
| mousewheel | Устарело. Вместо этого используйте событие wheel | WheelEvent |
| offline | Браузер начинает работать в автономном режиме | Event |
| online | Браузер начинает работать онлайн | Event |
| open | Открывается соединение с источником события. | Event |
| pagehide | Пользователь уходит с веб-страницы | PageTransitionEvent |
| pageshow | Пользователь переходит на веб-страницу | PageTransitionEvent |
| paste | Некоторое содержимое вставлено в элемент | ClipboardEvent |
| pause | Медиа приостановлено | Event |
| play | Медиа запущено или больше не приостановлено | Event |
| playing | Медиа воспроизводится после паузы или буферизации. | Event |
| popstate | История окна меняется | PopStateEvent |
| progress | Браузер загружает медиаданные | Event |
| ratechange | Скорость воспроизведения медиафайла изменена | Event |
| resize | Размер представления документа изменен | UiEvent, Event |
| reset | Форма сбрасывается | Event |
| scroll | Полоса прокрутки прокручивается | UiEvent, Event |
| search | Что-то написано в поле поиска | Event |
| seeked | Переход к позиции носителя завершен. | Event |
| seeking | Начат переход к позиции носителя | Event |
| select | Пользователь выбирает какой-то текст | UiEvent, Event |
| show | Элемент <menu> отображается как контекстное меню. | Event |
| stalled | Браузер пытается получить недоступные медиаданные | Event |
| storage | Обновлена область веб-хранилища | StorageEvent |
| submit | Форма отправлена | Event |
| suspend | Браузер намеренно не получает медиаданные | Event |
| timeupdate | Изменилась позиция воспроизведения (пользователь переместился в другую точку медиа) | Event |
| toggle | Пользователь открывает или закрывает элемент <details> | Event |
| touchcancel | Прикосновение прерывается. | TouchEvent |
| touchend | Палец убран с сенсорного экрана | TouchEvent |
| touchmove | Палец скользит по экрану. | TouchEvent |
| touchstart | Палец помещается на сенсорный экран | TouchEvent |
| transitionend | CSS Переход завершен. | TransitionEvent |
| unload | Страница выгружена | UiEvent, Event |
| volumechange | Изменена громкость носителя (включая отключение звука) | Event |
| waiting | Медиа приостановлено, но ожидается его возобновление (например, буферизация) | Event |
| wheel | Колесико мыши прокручивается вверх или вниз по элементу | WheelEvent |