Содержание

Справочник по событиям | MDN

abortUIEventDOM L3The loading of a resource has been aborted.
abortProgressEventProgress and XMLHttpRequestProgression has been terminated (not due to an error).
abortEventIndexedDBA transaction has been aborted.
afterprintEventHTML5The associated document has started printing or the print preview has been closed.
animationcancelAnimationEvent Это экспериментальное API, которое не должно использоваться в рабочем коде.CSS AnimationsA CSS animation has aborted.
animationendAnimationEvent Это экспериментальное API, которое не должно использоваться в рабочем коде.
CSS AnimationsA CSS animation has completed.
animationiterationAnimationEvent Это экспериментальное API, которое не должно использоваться в рабочем коде.CSS AnimationsA CSS animation is repeated.
animationstartAnimationEvent Это экспериментальное API, которое не должно использоваться в рабочем коде.CSS AnimationsA CSS animation has started.
appinstalledEventWeb App ManifestA web application is successfully installed as a progressive web app.
audioprocessAudioProcessingEvent Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать.Web Audio API
Определение ‘audioprocess’ в этой спецификации.
The input buffer of a ScriptProcessorNode is ready to be processed.
audioend
Это экспериментальное API, которое не должно использоваться в рабочем коде.
EventWeb Speech APIThe user agent has finished capturing audio for speech recognition.
audiostart Это экспериментальное API, которое не должно использоваться в рабочем коде.EventWeb Speech APIThe user agent has started to capture audio for speech recognition.
beforeprintEventHTML5The associated document is about to be printed or previewed for printing.
beforeunload
BeforeUnloadEventHTML5The window, the document and its resources are about to be unloaded.
beginEventTimeEventSVGA SMIL animation element begins.
blockedIndexedDBAn open connection to a database is blocking a versionchange transaction on the same database.
blurFocusEvent Это экспериментальное API, которое не должно использоваться в рабочем коде.DOM L3An element has lost focus (does not bubble).
boundary Это экспериментальное API, которое не должно использоваться в рабочем коде.SpeechSynthesisEventWeb Speech APIThe spoken utterance reaches a word or sentence boundary
canplayEventHTML5 mediaThe user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
canplaythrough
Event
HTML5 mediaThe user agent can play the media up to its end without having to stop for further buffering of content.
changeEventDOM L2, HTML5The change event is fired for <input>, <select>, and <textarea> elements when a change to the element’s value is committed by the user.
chargingchangeEventBattery statusThe battery begins or stops charging.
chargingtimechangeEventBattery statusThe chargingTime attribute has been updated.
clickMouseEventDOM L3A pointing device button has been pressed and released on an element.
closeEventWebSocketA WebSocket connection has been closed.
completeIndexedDBA transaction successfully completed.
completeOfflineAudioCompletionEvent Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать.Web Audio API
Определение ‘OfflineAudioCompletionEvent’ в этой спецификации.
The rendering of an OfflineAudioContext is terminated.
compositionendCompositionEventDOM L3The composition of a passage of text has been completed or canceled.
compositionstartCompositionEvent
DOM L3The composition of a passage of text is prepared (similar to keydown for a keyboard input, but works with other inputs such as speech recognition).
compositionupdateCompositionEventDOM L3A character is added to a passage of text being composed.
contextmenuMouseEventHTML5The right button of the mouse is clicked (before the context menu is displayed).
copy
ClipboardEvent Это экспериментальное API, которое не должно использоваться в рабочем коде.ClipboardThe text selection has been added to the clipboard.
cutClipboardEvent Это экспериментальное API, которое не должно использоваться в рабочем коде.ClipboardThe text selection has been removed from the document and added to the clipboard.
dblclickMouseEventDOM L3A pointing device button is clicked twice on an element.
devicechangeEvent
Media Capture and Streams
A media device such as a camera, microphone, or speaker is connected or removed from the system.
devicemotionDeviceMotionEvent Это экспериментальное API, которое не должно использоваться в рабочем коде.Device Orientation EventsFresh data is available from a motion sensor.
deviceorientationDeviceOrientationEvent Это экспериментальное API, которое не должно использоваться в рабочем коде.Device Orientation EventsFresh data is available from an orientation sensor.
dischargingtimechangeEventBattery statusThe dischargingTime attribute has been updated.
DOMActivate Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать.UIEventDOM L3A button, link or state changing element is activated (use click instead).
DOMAttributeNameChanged Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать.MutationNameEventDOM L3 RemovedThe name of an attribute changed (use mutation observers instead).
DOMAttrModified Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать.MutationEventDOM L3The value of an attribute has been modified (use mutation observers instead).
DOMCharacterDataModified Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать.MutationEventDOM L3A text or another CharacterData has changed (use mutation observers instead).
DOMContentLoadedEventHTML5The document has finished loading (but not its dependent resources).
DOMElementNameChanged Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать.MutationNameEventDOM L3 RemovedThe name of an element changed (use mutation observers instead).
DOMFocusIn Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать.FocusEvent Это экспериментальное API, которое не должно использоваться в рабочем коде.DOM L3An element has received focus (use focus or focusin instead).
DOMFocusOut Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать.FocusEvent Это экспериментальное API, которое не должно использоваться в рабочем коде.DOM L3An element has lost focus (use blur or focusout instead).
DOMNodeInserted Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать.MutationEventDOM L3A node has been added as a child of another node (use mutation observers instead).
DOMNodeInsertedIntoDocument Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать.MutationEventDOM L3A node has been inserted into the document (use mutation observers instead).
DOMNodeRemoved Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать.MutationEventDOM L3A node has been removed from its parent node (use mutation observers instead).
DOMNodeRemovedFromDocument Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать.MutationEventDOM L3A node has been removed from the document (use mutation observers instead).
DOMSubtreeModified Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать.MutationEventDOM L3A change happened in the document (use mutation observers instead).
dragDragEventHTML5An element or text selection is being dragged (every 350ms).
dragendDragEventHTML5A drag operation is being ended (by releasing a mouse button or hitting the escape key).
dragenterDragEventHTML5A dragged element or text selection enters a valid drop target.
dragleaveDragEventHTML5A dragged element or text selection leaves a valid drop target.
dragoverDragEventHTML5An element or text selection is being dragged over a valid drop target (every 350ms).
dragstartDragEventHTML5The user starts dragging an element or text selection.
dropDragEventHTML5An element is dropped on a valid drop target.
durationchangeEventHTML5 mediaThe duration attribute has been updated.
emptiedEventHTML5 mediaThe media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it.
end Это экспериментальное API, которое не должно использоваться в рабочем коде.EventWeb Speech APIThe speech recognition service has disconnected.
end Это экспериментальное API, которое не должно использоваться в рабочем коде.SpeechSynthesisEventWeb Speech APIThe utterance has finished being spoken.
endedEventHTML5 mediaPlayback has stopped because the end of the media was reached.
endedEventWeb Audio APIPlayback has stopped because the end of the media was reached.
endEventTimeEventSVGA SMIL animation element ends.
errorUIEventDOM L3A resource failed to load.
errorProgressEventProgress and XMLHttpRequestProgression has failed.
errorEventWebSocketA WebSocket connection has been closed with prejudice (some data couldn’t be sent for example).
errorEventServer Sent EventsAn event source connection has been failed.
errorEventIndexedDBA request caused an error and failed.
error Это экспериментальное API, которое не должно использоваться в рабочем коде.EventWeb Speech APIA speech recognition error occurs.
errorSpeechSynthesisErrorEventWeb Speech APIAn error occurs that prevents the utterance from being successfully spoken.
focusFocusEvent Это экспериментальное API, которое не должно использоваться в рабочем коде.DOM L3An element has received focus (does not bubble).
focusinFocusEvent Это экспериментальное API, которое не должно использоваться в рабочем коде.DOM L3An element is about to receive focus (bubbles).
focusoutFocusEvent Это экспериментальное API, которое не должно использоваться в рабочем коде.DOM L3An element is about to lose focus (bubbles).
fullscreenchangeEventFull ScreenAn element was turned to fullscreen mode or back to normal mode.
fullscreenerrorEventFull ScreenIt was impossible to switch to fullscreen mode for technical reasons or because the permission was denied.
gamepadconnectedGamepadEvent Это экспериментальное API, которое не должно использоваться в рабочем коде.GamepadA gamepad has been connected.
gamepaddisconnectedGamepadEvent Это экспериментальное API, которое не должно использоваться в рабочем коде.GamepadA gamepad has been disconnected.
gotpointercapturePointerEventPointer EventsElement receives pointer capture.
hashchangeHashChangeEventHTML5The fragment identifier of the URL has changed (the part of the URL after the #).
lostpointercapturePointerEventPointer EventsElement lost pointer capture.
inputEventHTML5The value of an element changes or the content of an element with the attribute contenteditable is modified.
invalidEventHTML5A submittable element has been checked and doesn’t satisfy its constraints.
keydownKeyboardEventDOM L3A key is pressed down.
keypress Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать.KeyboardEventDOM L3A key is pressed down and that key normally produces a character value (use input instead).
keyupKeyboardEventDOM L3A key is released.
languagechange Это экспериментальное API, которое не должно использоваться в рабочем коде.EventHTML 5.1
Определение ‘NavigatorLanguage.languages’ в этой спецификации.
The user’s preferred languages have changed.
levelchangeEventBattery statusThe level attribute has been updated.
loadUIEventDOM L3A resource and its dependent resources have finished loading.
loadProgressEventProgress and XMLHttpRequestProgression has been successful.
loadeddataEventHTML5 mediaThe first frame of the media has finished loading.
loadedmetadataEventHTML5 mediaThe metadata has been loaded.
loadendProgressEventProgress and XMLHttpRequestProgress has stopped (after «error», «abort» or «load» have been dispatched).
loadstartProgressEventProgress and XMLHttpRequestProgress has begun.
mark Это экспериментальное API, которое не должно использоваться в рабочем коде.SpeechSynthesisEventWeb Speech APIThe spoken utterance reaches a named SSML «mark» tag.
messageMessageEventWebSocketA message is received through a WebSocket.
messageMessageEventWeb WorkersA message is received from a Web Worker.
messageMessageEventWeb MessagingA message is received from a child (i)frame or a parent window.
messageMessageEventServer Sent EventsA message is received through an event source.
messageerrorMessageEventMessagePort, Web Workers, Broadcast Channel, WindowA message error is raised when a message is received by an object.
message Это экспериментальное API, которое не должно использоваться в рабочем коде.ServiceWorkerMessageEvent or ExtendableMessageEvent, depending on context.Service WorkersA message is received from a service worker, or a message is received in a service worker from another context.
mousedownMouseEventDOM L3A pointing device button (usually a mouse) is pressed on an element.
mouseenterMouseEventDOM L3A pointing device is moved onto the element that has the listener attached.
mouseleaveMouseEventDOM L3A pointing device is moved off the element that has the listener attached.
mousemoveMouseEventDOM L3A pointing device is moved over an element.
mouseoutMouseEventDOM L3A pointing device is moved off the element that has the listener attached or off one of its children.
mouseoverMouseEventDOM L3A pointing device is moved onto the element that has the listener attached or onto one of its children.
mouseupMouseEventDOM L3A pointing device button is released over an element.
nomatch Это экспериментальное API, которое не должно использоваться в рабочем коде.SpeechRecognitionEventWeb Speech APIThe speech recognition service returns a final result with no significant recognition.
notificationclickNotificationEvent Это экспериментальное API, которое не должно использоваться в рабочем коде.Notifications API
Определение ‘onnotificationclick’ в этой спецификации.
A system notification spawned by ServiceWorkerRegistration.showNotification() has been clicked.
offlineEventHTML5 offlineThe browser has lost access to the network.
onlineEventHTML5 offlineThe browser has gained access to the network (but particular websites might be unreachable).
openEventWebSocketA WebSocket connection has been established.
openEventServer Sent EventsAn event source connection has been established.
orientationchangeEventScreen OrientationThe orientation of the device (portrait/landscape) has changed
pagehidePageTransitionEventHTML5A session history entry is being traversed from.
pageshowPageTransitionEventHTML5A session history entry is being traversed to.
pasteClipboardEvent Это экспериментальное API, которое не должно использоваться в рабочем коде.ClipboardData has been transferred from the system clipboard to the document.
pauseEventHTML5 mediaPlayback has been paused.
pause Это экспериментальное API, которое не должно использоваться в рабочем коде.SpeechSynthesisEventWeb Speech APIThe utterance is paused part way through.
pointercancelPointerEventPointer EventsThe pointer is unlikely to produce any more events.
pointerdownPointerEventPointer EventsThe pointer enters the active buttons state.
pointerenterPointerEventPointer EventsPointing device is moved inside the hit-testing boundary.
pointerleavePointerEventPointer EventsPointing device is moved out of the hit-testing boundary.
pointerlockchangeEventPointer LockThe pointer was locked or released.
pointerlockerrorEventPointer LockIt was impossible to lock the pointer for technical reasons or because the permission was denied.
pointermovePointerEventPointer EventsThe pointer changed coordinates.
pointeroutPointerEventPointer EventsThe pointing device moved out of hit-testing boundary or leaves detectable hover range.
pointeroverPointerEventPointer EventsThe pointing device is moved into the hit-testing boundary.
pointerupPointerEventPointer EventsThe pointer leaves the active buttons state.
playEventHTML5 mediaPlayback has begun.
playingEventHTML5 mediaPlayback is ready to start after having been paused or delayed due to lack of data.
popstatePopStateEventHTML5A session history entry is being navigated to (in certain cases).
progressProgressEventProgress and XMLHttpRequestIn progress.
pushPushEvent Это экспериментальное API, которое не должно использоваться в рабочем коде.Push APIA Service Worker has received a push message.
pushsubscriptionchangePushEvent Это экспериментальное API, которое не должно использоваться в рабочем коде.Push APIA PushSubscription has expired.
ratechangeEventHTML5 mediaThe playback rate has changed.
readystatechangeEventHTML5 and XMLHttpRequestThe readyState attribute of a document has changed.
repeatEventTimeEventSVGA SMIL animation element is repeated.
resetEventDOM L2, HTML5A form is reset.
resizeUIEventDOM L3The document view has been resized.
resourcetimingbufferfullPerformanceResource TimingThe browser’s resource timing buffer is full.
result Это экспериментальное API, которое не должно использоваться в рабочем коде.SpeechRecognitionEvent Это экспериментальное API, которое не должно использоваться в рабочем коде.Web Speech APIThe speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app.
resume Это экспериментальное API, которое не должно использоваться в рабочем коде.SpeechSynthesisEvent Это экспериментальное API, которое не должно использоваться в рабочем коде.Web Speech APIA paused utterance is resumed.
scrollUIEventDOM L3The document view or an element has been scrolled.
seekedEventHTML5 mediaA seek operation completed.
seekingEventHTML5 mediaA seek operation began.
selectUIEventDOM L3Some text is being selected.
selectstart Это экспериментальное API, которое не должно использоваться в рабочем коде.EventSelection APIA selection just started.
selectionchange Это экспериментальное API, которое не должно использоваться в рабочем коде.EventSelection APIThe selection in the document has been changed.
showMouseEventHTML5A contextmenu event was fired on/bubbled to an element that has a contextmenu attribute
slotchangeEventDOMThe node contents of a HTMLSlotElement (<slot>) have changed.
soundend Это экспериментальное API, которое не должно использоваться в рабочем коде.EventWeb Speech APIAny sound — recognisable speech or not — has stopped being detected.
soundstart Это экспериментальное API, которое не должно использоваться в рабочем коде.EventWeb Speech APIAny sound — recognisable speech or not — has been detected.
speechend Это экспериментальное API, которое не должно использоваться в рабочем коде.EventWeb Speech APISpeech recognised by the speech recognition service has stopped being detected.
speechstart Это экспериментальное API, которое не должно использоваться в рабочем коде.EventWeb Speech APISound that is recognised by the speech recognition service as speech has been detected.
stalledEventHTML5 mediaThe user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
start Это экспериментальное API, которое не должно использоваться в рабочем коде.EventWeb Speech APIThe speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current SpeechRecognition.
startSpeechSynthesisEventWeb Speech APIThe utterance has begun to be spoken.
storageStorageEventWeb StorageA storage area (localStorage or sessionStorage) has changed.
submitEventDOM L2, HTML5A form is submitted.
successEventIndexedDBA request successfully completed.
suspendEventHTML5 mediaMedia data loading has been suspended.
SVGAbortSVGEventSVGPage loading has been stopped before the SVG was loaded.
SVGErrorSVGEventSVGAn error has occurred before the SVG was loaded.
SVGLoadSVGEventSVGAn SVG document has been loaded and parsed.
SVGResizeSVGEventSVGAn SVG document is being resized.
SVGScrollSVGEventSVGAn SVG document is being scrolled.
SVGUnloadSVGEventSVGAn SVG document has been removed from a window or frame.
SVGZoomSVGZoomEventSVGAn SVG document is being zoomed.
timeoutProgressEventXMLHttpRequest
timeupdateEventHTML5 mediaThe time indicated by the currentTime attribute has been updated.
touchcancelTouchEventTouch EventsA touch point has been disrupted in an implementation-specific manners (too many touch points for example).
touchendTouchEventTouch EventsA touch point is removed from the touch surface.
touchmoveTouchEventTouch EventsA touch point is moved along the touch surface.
touchstartTouchEventTouch EventsA touch point is placed on the touch surface.
transitionendTransitionEvent Это экспериментальное API, которое не должно использоваться в рабочем коде.CSS TransitionsA CSS transition has completed.
unloadUIEventDOM L3The document or a dependent resource is being unloaded.
upgradeneededIndexedDBAn attempt was made to open a database with a version number higher than its current version. A versionchange transaction has been created.
userproximityUserProximityEvent Это экспериментальное API, которое не должно использоваться в рабочем коде.Proximity SensorFresh data is available from a proximity sensor (indicates whether the nearby object is near the device or not).
voiceschanged Это экспериментальное API, которое не должно использоваться в рабочем коде.EventWeb Speech APIThe list of SpeechSynthesisVoice objects that would be returned by the SpeechSynthesis.getVoices() method has changed (when the voiceschanged event fires.)
versionchangeIndexedDBA versionchange transaction completed.
visibilitychangeEventPage visibilityThe content of a tab has become visible or has been hidden.
volumechangeEventHTML5 mediaThe volume has changed.
waitingEventHTML5 mediaPlayback has stopped because of a temporary lack of data.
wheelWheelEventDOM L3A wheel button of a pointing device is rotated in any direction.

Обзор событий и обработчиков — Руководства Web-разработчика

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

События и их обработчики представляют собой основную технику в JavaScript для реагирования на события, возникающие, когда браузер получает доступ к web-странице, включая события о подготовке страницы к отображению, взаимодействии с ее содержимым, в зависимости от устройства, на котором браузер был запущен, и многие другие случаи, такие как воспроизведение потоковой медиа-информации или расчет времени анимации.

События и обработчики событий заняли центральное место в web-программировании с добавлением языка в браузеры, сопровождая смену архитектуры рендеринга от перехвата и загрузки страницы к управлению с помощью событий, основанном на перекомпановке (reflow). Сначала браузер ожидает, пока он получит все ресурсы, связанные со страницей, чтобы проанализировать, обработать, отрисовать и предоставить страницу пользователю. Отрисованная страница остается неизменной, пока браузер не запросит новую. С изменением в подходе к рендерингу динамической страницы, браузер непрерывно зацикливается между обработкой, отрисовкой, представлением содержимого и ожиданием некоторого нового триггера события. Триггеры событий включают, например, завершение загрузки ресурса по сети, скачивание изображений, которые теперь могут быть отрисованы на экране, завершение браузером анализа ресурса, обработку HTML-содержимого страницы, взаимодействие пользователя с содержимым страницы, нажатия кнопок. Дуглас Крокфорд хорошо объясняет это изменение в нескольких лекциях, особенно своей речи «Неудобные API: Теория DOM», которая описывает изменения в потоке изначального потока браузера от управляемого событиями браузера.

Второй подход изменяет последние шаги, переходя от просторого потока к бесконечному циклу, где ожидание и обработка возникновения новых событий следует за отрисовкой. Введение динамического подхода позволяет странице быть частично отрендериной, даже когда браузер еще не закончил извлечение всех ресурсов; это так же разрешено для действий, управляемыми событиями, которые JavaScript использует. (Речь доступна на нескольких ресурсах, включая этот.) На данный момент, все среды исполнения JavaScript используют события и их обработчики.

Система событий, по своей сути, простой программный шаблон проектирования. Он начинается с соглашения о виде события и:

  • имени-строки, используемой для собыйтия,
  • типа структуры данных, используемых для представления ключевых свойств события,
  • объекта JavaScript, который будет ‘вызывать’ это событие.

Шаблон реализуется с помощью:

  • определение JavaScript-функции, которая принимает в качестве аргумента структуру данных, которая была согласована ранее, и
  • регистрации функции с помощью имени-строки через объект, который будет вызывать событие.

Функция считается «слушателем» или «обработчиком», где оба именами взаимнозаменяемы. Этому шаблону можно легко следовать с использованием полностью пользовательского кода, как объяснено в статье о пользовательских событиях. Шаблон так же используется современными web-браузерами, определяющими множество событий, которые вызываются в ответ на пользовательский ввод или активность браузера.

Современные браузеры следуют событийному шаблону, используя стандартизированный подход. В качестве структуры данных для свойств события они применяют объект, полученный от объекта EventPrototype. Для регистратрации функции, которая будет обрабатывать эту структуру даных, используется метод, называемый addEventListener, который ожидает в качестве аргумента имя-строку, соответствующую типу события, и функцию-обработчика. В итоге, браузеры определяют огромное число объектов источников событий и широкое разнообразие типов событий, сформированных объектами.

К примеру, браузерный элемент button предназначен для вызова события с именем  'click' в ответ на нажатие кнопки мыши или прикосновене пальца к чувствительной части экрана. В HTML мы можем определить  button как:

<button>Click here to emit a 'click' event</button>

и, в коде JavaScript, мы можем сначала определить функцию для прослушивания этого события 'click' :

var example_click_handler = function (ev){
    var objKind = (ev instanceof Event) ? "EventPrototype" : "ObjectPrototype";
    alert("We got a click event at " + ev. timeStamp + " with an argument object derived from: " + objKind );
};

и затем зарегестрировать свою функцию с помощью объекта Button или со стороны скрипта, используя представление DOM (Document Object Model) на HTML-странице:

var buttonDOMElement = document.querySelector('#buttonOne');
buttonDOMElement.addEventListener('click', example_click_handler);

или на самой HTML-странице, добавив функцию как значение атрибута 'onclick', хотя этот вариант обычно используется на очень  простых web-страницах.

Этот код полагается на соглашение о том, что существует некоторый вид события, называемый 'click' , который вызовет все функции-слушатели (или ‘обработчи’) с объектом-аргументом Event (на данный момент, в этом случае производный от объекта MouseEvent ) и будет запущен после манипуляций пользователя с элементами button на HTML-странице. Код не имеет видимого воздействия, пока пользователь не использует кнопки, наводит указатель мыши на элемент HTML и нажимает на левую кнопку или устанавливает палец или стилус на некоторое место на экране, выше кнопки; когда это произойдет, buttonDOMElement объекта JavaScript вызовет функцию example_click_handler с объектом Event в качестве аргумента. Функция, в свою очередь, исполнит любые действия, описанные программистом, в данном случае отрыв диалоговое окно HTML. Заметим, что обработчик имеет доступ к объекту ev, так как тот передается в качестве аргумента; объект содержит информацию о событие, в частности время его возникновения.

Во втором варианте, интегрирован в web-страницу намного более современный JavaScript обернут в событийный вызов функции, чтобы убедиться, что код будет выполнен только тогда, когда HTML будет обработан и доступен для изменения или декорирования. Например, код может быть объявлен так:

var funcInit = function(){
    
    
}
document.addEventListener('DOMContentLoaded', funcInit);

так что этот код будет вызван только после того, как объект document вызовет событие 'DOMContentLoaded', потому что HTML был проанализирован и были созданы объекты Javasript,   представляющие каждый узел HTML-документа. Заметим, что в этом примере, код даже не передает аргумент события в функцию, потому что тому никогда не понадобится использовать данные, описанные в нем; скорее, код всего лишь нужно подождать, пока не случится событие.

Шаблон легко изучить и внедрить. Сложность с событиями возникает из-за необходимости изучить большое разнообразие событий, которые представлены в современных web-браузерах. Так же есть некоторая сложность в понимании, как писать обработчики, так как данный код работает ассинхронно и потенциально может быть вызван несколько раз подряд, но в немного другой ситуации.

Web-браузеры определяют большое число событий, поэтому не практично описывать их все. Event Reference призван содержать список стандартных событий, используемых в современных браузерах.

В общем случае, события различного вида выделяют, основываясь на объекте, который вызывает данное событие, включая:

  • объект window, на случай изменения размера браузера,
  • объект window.screen, на случай изменения положения устройства,
  • объект document, включая загрузку, модификацию, пользовательское взаимодействие и разгрузку страницы,
  • объект в DOM (объектная модель документа) дереве, включая пользовательское взаимодействие или изменения,
  • объект XMLHttpRequest, используемый для запросов сети, и
  • медиа-объекты, такие как audio и video, когда медиа-потоковые плееры изменяют состояние.

хотя этот список на данный момент неполный.

Некоторые события, которые стоит отметить:

Заметка: Этот список событий будет нуждаться в доработке, чтобы соответствовать действительности; эта работа ожидает некоторой глобальной реорганизации в документе. Так же нужно найти хорошее объяснение событий, включая события во время загрузки страницы, таких, как частично описаных в этой статье  или  этом вопросе на  Stack Overflow.

  • глобальный объект window вызывает событие, называемое 'load', когда страница закончила рендеринг, подразумевая, что все ресурсы были скачаны и применены, так что скрипт был выполнен и изображения отображены,
  • глобальный объект window вызывает событие, называемое 'resize', когда высота или ширина окна браузера была измененеа пользователем,
  • объект DOM document, представляющий HTML-документ, вызывает событие, называемое 'DOMContentLoaded', когда документ закончил загрузку,
  • объект узла DOM, такой как div или button, вызывающий событие, называемое 'click', когда пользователь нажимает кнопку мыши, пока ее указатель находится поверх узла DOM на HTML-странице.

Web-браузер определяет множество событий различного вида. Каждое описание включает, как структуру данных, передающуюся в обработчика, объект, который наследуется от объекта EventPrototype.

Частичная диаграма иерархии класса объекта событий:

Заметка: Эта диаграма неполная.

Web API Документация содержит страницу, описывающую объект событий, который так же включает известные события DOM, подклассы объекта Event.

Три ресурса на MDN (Mozilla Developer Network) частично полезные для программистов, желащих работать с событиями:

Список родных событий Javascript

Событие Обработчик события Поддерживающие HTML-элементы Описание

События мыши

click onClick * Практически все HTML-элементы Одинарный щелчок (нажата и отпущена кнопка мыши)
dblclick onDblClick * Практически все HTML-элементы Двойной щелчок
contextmenu onContextmenu * Практически все HTML-элементы Щелчок правой кнопкой мыши на элементе
selectstart onselectstart * Практически все HTML-элементы Начало выделения контента.
Изменение выделения скриптом.
mousewheel onMousewheel * Практически все HTML-элементы Нажата кнопка мыши в пределах текущего элемента
mousemove onMouseMove * Практически все HTML-элементы Перемещение курсора мыши в пределах текущего элемента
mouseout onMouseOut * Практически все HTML-элементы Курсор мыши выведен за пределы текущего элемента
mouseover onMouseOver * Практически все HTML-элементы Курсор мыши наведен на текущий элемент
mouseup onMouseUp * Практически все HTML-элементы Отпущена кнопка мыши в пределах текущего элемента
mousedown onMouseDown * Практически все HTML-элементы Нажата кнопка мыши в пределах текущего элемента

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

keydown onKeyDown * Практически все HTML-элементы Нажата клавиша на клавиатуре
keypress onKeyPress * Практически все HTML-элементы Нажата и отпущена клавиша на клавиатуре
keyup onKeyUp * Практически все HTML-элементы Отпущена клавиша на клавиатуре

События элементов форм

focus onFocus A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA Получение элементом фокуса (щелчок мышью на элементе или очередное нажатие клавиши табуляции)
blur onBlur A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA Потеря текущим элементом фокуса, т. е. переход к другому элементу. Возникает при щелчке мышью вне элемента либо нажатии клавиши табуляции
change onChange INPUT, SELECT, TEXTAREA Изменение значений элементов формы. Возникает после потерей элементом фокуса, т.е. после события blur
reset onReset FORM Сброс данных формы ( щелчок по кнопке
<input type=»reset»> )
select onSelect INPUT, TEXTAREA Выделение текста в текущем элементе
submit onSubmit FORM Отправка данных формы ( щелчок по кнопке
<input type=»submit»> )
abort onAbort IMG, input type=»img» Прерывание загрузки изображения

События окна браузера

load onLoad BODY, FRAMESET Закончена загрузка документа
unload onUnload BODY, FRAMESET Попытка закрытия окна браузера и выгрузки документа
error onError IMG, WINDOW Возникновение ошибки выполнения сценария
move onMove WINDOW Перемещение окна
resize onResize WINDOW Изменение размеров окна
scroll onScroll * Практически все HTML-элементы Прокрутка окна или области

Все обработчики событий JavaScript — полный список с описанием

21. 08.18 JavaScript 864

Для оживления веб-страниц широко используется язык JavaScript. В этом языке существуют специальные события, которые происходят в определенный момент времени при выполнении каких-либо действий. Обработчиков событий достаточно много, также были введены новые HTML5 обработчики событий.

Полный список обработчиков событий приводится ниже. Выполнение кода обработчика запускается, когда выполнено условие:

  • onabort – прерывание воспроизведения;
  • onafterprint – закончена печать;
  • onautocomplete – выполнено автозаполнение формы;
  • onautocompleteerror – ошибка при автозаполнении формы;
  • onbeforeprint – подготовка к печати;
  • onbeforeunload — документ выгружен;
  • onblur – потеря фокуса;
  • oncancel – отмена действия;
  • oncanplay — можно начать воспроизведение указанного медиа-файла;
  • oncanplaythrough — можно начать воспроизведение указанного медиа-файла без необходимости остановки для буферизации;
  • onchange – изменение значения;
  • onclick – клик на элементе;
  • onclose – закрытие чего-либо;
  • oncontextmenu – открытие контекстного меню;
  • oncopy – выполнено копирование;
  • oncuechange — изменение метки в элементе track;
  • oncut – выполнено вырезание контента;
  • ondblclick – двойной клик на элементе;
  • ondrag — перетаскивание элемента;
  • ondragend — перетаскивание элемента завершено;
  • ondragenter — элемент перетаскивается в допустимую целевую зону;
  • ondragexit – выход из режима перетаскивания;
  • ondragleave — элемент оставляет допустимую цель;
  • ondragover — элемент перетаскивается по допустимой целевой точке;
  • ondragstart – начало операции перетаскивания;
  • ondrop – перетаскиваемый элемент отпущен;
  • ondurationchange — изменение длины носителя;
  • onemptied – файл неожиданно стал недоступен;
  • onended – воспроизведение завершено;
  • onerror – произошла ошибка;
  • onfocus – установка фокуса на элементе;
  • onhashchange — изменение привязки части адреса;
  • oninput – начало ввода данных;
  • oninvalid – элемент поврежден;
  • onkeydown – нажата клавиша;
  • onkeypress — нажата клавиша и затем отпущена;
  • onkeyup – отпущена клавиша;
  • onload – элемент загружен;
  • onloadeddata – загружены данные файла;
  • onloadedmetadata – загружены метаданные файла;
  • onloadstart – начало загрузки элемента;
  • onmessage — появление сообщения;
  • onmousedown – нажата клавиша мыши;
  • onmouseenter – указатель мыши наведен на элемент;
  • onmouseleave – указатель мыши покинул элемент;
  • onmousemove — указатель мыши перемешен над элементом;
  • onmouseout — указатель мыши перемещается из элемента;
  • onmouseover — указатель мыши перемещается по элементу;
  • onmouseup — кнопка мыши отпускается над элементом;
  • onmousewheel (onwheel) – использовано колесико мыши;
  • onoffline – браузер запущен в оффлайн режиме;
  • ononline – браузер запущен в онлайн режиме;
  • onpagehide — пользователь переходит от страницы;
  • onpageshow — пользователь переходит на страницу;
  • onpaste – выполнена вставка контента;
  • onpause – приостановка воспроизведения;
  • onplay – начало воспроизведения;
  • onplaying – воспроизведения файла;
  • onpopstate — изменение истории окна;
  • onprogress – получение метаданных файла;
  • onratechange — изменение скорости воспроизведения;
  • onreset – выполнен сброс данных;
  • onresize – изменение размера элемента;
  • onscroll – прокрутка содержимого элемента;
  • onsearch – выполнен поиск;
  • onseeked — поиск закончился;
  • onseeking – поиск активен;
  • onselect – выбор некоторого текста или значения;
  • onshow – показ элемента;
  • onsort – выполнение сортировки;
  • onstalled — браузер не может получить мультимедийные данные по любой причине;
  • onstorage – обновлено веб-хранилище;
  • onsubmit – подтверждение отправки данных формы;
  • onsuspend – остановка извлечения метаданных;
  • ontimeupdate – изменение позиции (времени) воспроизведения файла, то есть перемотка файла;
  • ontoggle — пользователь открывает или закрывает элемент details;
  • onunload – загрузка выполнена, после чего произошло закрытие документа;
  • onvolumechange – громкость изменена;
  • onwaiting – ожидание восстановления воспроизведения.

Обработчики событий следует использовать правильным образом, желательно не писать их напрямую в атрибутах тегов, а устанавливать обработчики событий в подключаемых файлах с JavaScript-кодом. Если используется библиотека jQuery, то название обработчиков необходимо писать без префикса on. Таким образом, были рассмотрены все обработчики событий JavaScript, приведен полный список событий с описанием.

События в Javascript

HTML события это такая «вещь», которая временами происходит с HTML элементами.

HTML событие может быть неким действием, которое делает браузер или пользователь.

При использовании на HTML странице скрипта JavaScript он может реагировать на эти события.

Вот несколько примеров HTML событий:

  • HTML страница закончила загружаться
  • Поле ввода было изменено
  • Пользователь нажал на HTML кнопку

Часто, при возникновении HTML события необходимо что-то сделать. JavaScript позволяет при обнаружении нужного события выполнить необходимый код. Для этого у HTML элементов есть специальные атрибуты обработчики событий, в которые и можно добавить JavaScript код:

С одинарными кавычками:
элемент событие=’код JavaScript‘>

С двойными кавычками:
<элемент событиекод JavaScript«>

В следующем примере элементу button добавлен атрибут onclick с JavaScript кодом:


<button>
	Какая сейчас дата и время?
</button>

В приведенном примере при нажатии пользователем на кнопку код JavaScript изменит содержимое элемента с id=»demo» и выведет в него текущую дату и время.

В следующем примере JavaScript код изменит содержимое самого элемента (используется команда this.innerHTML):


<button>
	Какая сейчас дата и время?
</button>

Однако, очень редко можно увидеть код JavaScript, состоящий из одного выражения. Поэтому обычно в атрибут события записывают вызов JavaScript функции:


<button>
	Какая сейчас дата и время?
</button>

Часто используемые HTML события

Ниже приводится список некоторых часто используемых HTML событий:

СобытиеОписание
onchangeHTML элемент был изменен
onclickПользователь кликнул мышкой на HTML элемент
onmouseoverПользователь навел мышку на HTML элемент
onmouseoutПользователь вывел мышку за пределы HTML элемента
onkeydownПользователь нажал на клавишу клавиатуры
onloadБраузер закончил загружать страницу

Конечно, список событий гораздо длиннее. Смотрите раздел События HTML DOM и HTML атрибуты-события.

Что может делать JavaScript с событиями?

Обработчик событий можно использовать для обработки и проверки пользовательского ввода, действий пользователя и браузера:

  • Выполнять действия повторяющиеся после загрузки страницы
  • Выполнять действия повторяющиеся после закрытия страницы
  • Действия, которые должны выполняться при нажатии пользователем на кнопку
  • Проверка данных, введенных пользователем в поле формы
  • И многое другое . ..

В JavaScript существует множество способов работать с событиями:

  • HTML атрибуты-события могут напрямую выполнять код JavaScript
  • HTML атрибуты-события могут вызывать функции JavaScript
  • Вы можете установить собственную функцию обработки события
  • Вы можете запретить отправку и обработку события
  • И многое другое …
Строка (объект String) Вверх Область видимости в Javascript

JS JavaScript HTML DOM События



HTML DOM позволяет JavaScript реагировать на события HTML:


Реагирование на события

JavaScript может быть выполнен при возникновении события, например, когда пользователь щелкает элемент HTML.

Чтобы выполнить код, когда пользователь щелкает элемент, добавьте код JavaScript в атрибут события HTML:

Примеры событий HTML:

  • Когда пользователь щелкает мышью
  • При загрузке веб-страницы
  • Когда изображение было загружено
  • Когда мышь перемещается над элементом
  • При изменении поля ввода
  • При отправке HTML-формы
  • Когда пользователь обгладит клавишу

В этом примере содержимое элемента <h2> изменяется, когда пользователь щелкает по нему:

Пример


<h2>Click on this text!</h2>

</body>
</html>

В этом примере функция вызывается из обработчика событий:

Пример


<h2>Click on this text!</h2>

<script>
function changeText(id) {
    id. innerHTML = «Ooops!»;
}
</script>

</body>
</html>



Атрибуты события HTML

Для назначения событий элементам HTML можно использовать атрибуты событий.

Пример

Assign an onclick event to a button element:

<button>Try it</button>

В приведенном выше примере функция с именем DisplayDate будет выполняться при нажатии кнопки.


Назначение событий с помощью HTML DOM

HTML DOM позволяет назначать события элементам HTML с помощью JavaScript:

Пример

Назначьте событие OnClick элементу Button:

<script>
document.getElementById(«myBtn»).onclick = displayDate;
</script>

В приведенном выше примере функция с именем DisplayDate присваивается HTML-элементу с идентификатором = «myBtn».

Функция будет выполнена при нажатии кнопки.


События OnLoad и Unload

События OnLoad и Unload инициируются, когда пользователь вводит или покидает страницу.

Событие OnLoad может использоваться для проверки типа браузера посетителя и версии браузера и загрузки соответствующей версии веб-страницы на основе информации.

События OnLoad и Unload могут использоваться для борьбы с файлами cookie.

Пример

<body onload=»checkCookies()»>


Событие onChange

Событие onChange часто используется в сочетании с проверкой полей ввода.

Ниже приведен пример использования OnChange. Функция верхнего регистра () будет вызываться, когда пользователь изменяет содержимое поля ввода.

Пример

<input type=»text» onchange=»upperCase()»>


События наведении курсора мыши

Для запуска функции при наведении курсора мыши на элемент HTML или из него можно использовать события наведении курсора мыши и onmouse:

Mouse Over Me


События OnMouseDown, OnMouseUp и OnClick

События OnMouseDown, OnMouseUp и OnClick являются частями щелчка мышью. Во-первых, при нажатии кнопки мыши, инициируется событие OnMouseDown, затем, когда кнопка мыши освобождается, инициируется событие OnMouseUp, и, наконец, когда щелчок мыши завершается, инициируется событие OnClick.

Click Me



Ссылка на объект события HTML DOM

Чтобы просмотреть список всех событий HTML DOM, посмотрите на нашу полную ссылку на объект события HTML DOM.


JavaScript — Виды событий — ИТ Шеф

На этом уроке мы рассмотрим основные виды событий, которые Вы можете перехватывать с помощью JavaScript для выполнения некоторого кода.

Все события JavaScript можно разделить на следующие категории: события мыши (Mouse Events), события клавиатуры (Keyboard Events), события объектов и фреймов (Frame/Object Events), события формы и элементов управления (Form Events), события перетаскивания (Drag Events), события анимации (Animation Events), события буфера обмена (Clipboard Events), события мультимедиа (Media Events), события трансформации (Transition Events), события, посылаемые сервером (Server-Sent Events), события касания (Touch Events), события печати (Print Events), разные события (Misc Events).

Внимание: все события в JavaScript пишутся строчными (маленькими) буквами.

  • mousedown — событие происходит, когда кнопка мыши нажата над некоторым элементом, но ещё не отпущена.
  • mouseup — событие происходит, когда кнопка мыши над некоторым элементом перешла из состояния нажатия, в состояние отпущена.
  • click — событие происходит, когда пользователь кликнул мышью на элементе. Порядок возникновения событий, связанных с click (для левой и средней кнопки мыши): mousedown -> mouseup -> click.
  • contextmenu — событие происходит, когда пользователь кликнул правой кнопкой мышью на элементе. Порядок возникновения событий, связанных с contextmenu (для правой кнопки мыши): mousedown -> mouseup -> contextmenu.
  • dblclick — событие происходит, когда пользователь выполнил двойной клик на элементе. Порядок возникновения событий, связанных с dblclick: mousedown -> mouseup -> click -> mousedown -> mouseup -> click -> dblclick.
  • mouseover — событие происходит, когда курсор мыши входит в область, принадлежащей элементу или одному из его детей.
  • mouseout — событие происходит, когда курсор мыши уходит из области, принадлежащей элементу или одному из его детей.
  • mousemove — событие происходит, когда курсор мыши перемещается внутри области, принадлежащей элементу.
  • mouseenter — событие возникает, когда указатель мыши входит в область, принадлежащую элементу. Это событие часто используется вместе с событием mouseleave, которое происходит, когда указатель мыши уходит из области, принадлежащей элементу. Событие mouseenter подобно событию mouseover и отличается от него только тем, что событие mouseenter не всплывает (с понятием всплытия события мы познакомимся немного позже).
  • mouseleave — событие происходит, когда указатель мыши уходит из области, принадлежащей элементу. Событие mouseleave подобно событию mouseout и отличается от него только тем, что событие mouseleave не всплывает (с понятием всплытия события мы познакомимся немного позже).

Порядок возникновения событий: keydown -> keypress -> keyup.

  • keydown — событие происходит, когда нажата клавиша на клавиатуре над элементом, но ещё не отпущена.
  • keyup — событие происходит, когда нажатая клавиша на клавиатуре над элементом перешла в состояние отпущено.
  • keypress — событие происходит, когда пользователь нажал клавишу на клавиатуре над элементом.
  • beforeunload — событие происходит, перед тем как документ будет выгружен. Это событие позволяет отображать дополнительное сообщение в диалоговом окне подтверждения «Вы действительно хотите покинуть эту страницу?». Стандартное сообщение, которое появляется при закрытии документа, может отличаться в разных браузерах. Но его Вы не можете изменить или удалить, Вы можете только с помощью этого метода добавить к нему собственное сообщение, которое будет отображаться вместе с сообщением по умолчанию.
  • error — событие срабатывает при возникновении ошибки, которая происходит при загрузке внешнего файла (например, документа или изображения).
  • hashchange — событие происходит при изменении якорной части (начинается с символа ‘#’) текущего URL.
  • load — событие происходит, когда загрузка объекта завершена. Событие load наиболее часто используется для элемента body, чтобы выполнить сценарий сразу же после того как веб-страница полностью загрузится.
  • unload — событие происходит при выгрузке страницы (например, при закрытии вкладки (окна) браузера).
  • pageshow — событие происходит, когда пользователь переходит на веб-страницу, т.е. после того как страница становится доступна пользователю. Событие pageshow похоже на событие load, за исключением того, что оно срабатывает каждый раз при загрузке страницы, даже если она загружается из кэша. При первой загрузке страницы событие pageshow срабатывает сразу после события load.
  • pagehide — событие происходит, когда пользователь уходит со страницы (событие pagehide происходит до события unload). Кроме этого данное событие, в отличие от события unload не препятствует кэшированию страницы.
  • resize — событие происходит при изменении размеров окна браузера.
  • scroll — событие происходит, когда вы прокручиваете содержимое элемента, имеющего полосу прокрутки.
  • focus — событие происходит, когда элемент получает фокус. Данное событие не всплывает.
  • blur — событие происходит, когда объект теряет фокус. Данное событие не всплывает.
  • focusin — событие происходит, когда элемент получает фокус. Событие focusin подобно событию focus, но отличается от него тем, что оно всплывает. Поэтому его можно использовать, когда Вам необходимо выяснить, кто теряет фокус: элемент или его ребёнок?
  • focusout — событие происходит, когда элемент собирается потерять фокус. Событие focusout подобно событию blur, но отличается от него тем, что оно всплывает. Поэтому его можно использовать, когда Вам необходимо выяснить, кто теряет фокус: элемент или его ребёнок?
  • change — событие происходит при изменении значения элемента, но уже после того как элемент потерял фокус. Кроме события change в JavaScript есть также похожее событие input, которое отличается от события change тем, что происходит сразу же после изменения значения элемента. Событие сhange в отличие от события input также работает с элементами keygen и select. Для радиокнопок (radiobuttons) и флажков (checkboxes) событие change происходит при изменении состояния этих элементов.
  • input — событие происходит после того как изменяется значение элемента input или элемента textarea.
  • invalid — событие происходит, когда элемент input, данные которого необходимо отправить вместе с другими данными формы на сервер, содержит недопустимые данные.
  • reset — событие происходит перед очисткой формы, которая осуществляется элементом input с type="reset".
  • search — событие возникает после того как пользователь нажимает на клавишу Enter или нажимает кнопку «x» (отмена) в элементе input с type="search".
  • select — событие происходит после того как Вы выбрали некоторый текст в элементе. Событие select в основном используется для элемента input с type="text" или textarea.
  • submit — событие происходит перед отправкой формы на сервер.

События, связанные с перетаскиваемым объектом (draggable target, исходный объект):

  • dragstart – событие происходит, когда пользователь начал перетаскивать элемент;
  • drag – событие происходит, когда пользователь перетаскивает элемент;
  • dragend – событие происходит, когда пользователь закончил перетаскивания элемента, т.е. когда отпустил курсор мыши.

События, связанные с объектом (drop target), который принимает перетаскиваемый объект (draggable target):

  • dragenter – событие происходит, когда перетаскиваемый объект (draggable target) вошёл в область элемента (drop target), который может принять перетаскиваемый объект (draggable target).
  • ragleave – событие происходит, когда перетаскиваемый объект (draggable target) покидает пределы элемента (drop target), который может его принять.
  • dragover — событие происходит, когда перетаскиваемый объект (draggable target) перемещается в области элемента (drop target), который может его принять.
  • drop — событие происходит, когда пользователь отпускает перетаскиваемый объект (draggable target) в область элемента (drop target), который может его принять.

Три события, которые могут произойти, во время выполнения CSS анимации:

  • animationstart — возникает, когда анимация CSS началась.
  • animationiteration — возникает, когда анимация CSS выполняется повторно.
  • animationend — возникает, когда CSS анимация закончилась.
  • сopy — событие происходит, когда пользователь копирует содержимое элемента. Событие copy также происходит, когда пользователь копирует элемент (например, изображения, созданные с помощью элемента img). Событие copy используется в основном для элементов input с type="text".
  • сut — событие происходит, когда пользователь вырезает содержимое элемента.
  • paste — событие происходит, когда пользователь вставляет некоторое содержимое в элемент.
  • afterprint — событие происходит, когда страница начинает печататься (т.е. после нажатия кнопки «Печать» в диалоговом окне) или если диалоговое окно «Печать» было закрыто.
  • beforeprint — событие возникает перед печатью страницы, т.е. до открытия диалогового окна «Печать».
  • transitionend — событие возникает, когда CSS-переход завершен. Примечание: если переход удален до завершения, (например, если свойство CSS transition-property удалено), то событие transitionend не сработает.
  • error — событие возникает при возникновении ошибки с источником события. Ошибка обычно возникает, когда связь нарушается. Если это произойдет, то объект EventSource будет автоматически пытаться подключиться к серверу.
  • open — событие возникает, когда соединение с источником события открыто.
  • message — событие возникает, когда сообщение получено через источник события.
    Объект event события message поддерживает следующие свойства:
    • data — содержит сообщение.
    • origin — URL документа, который вызвал событие.
    • lastEventId — идентификатор (id) последнего полученного сообщения.

В процессе загрузки аудио/видео события происходят в следующем порядке: loadstart -> durationchange -> loadedmetadata -> loadeddata -> progress -> canplay -> canplaythrough.

  • abort — событие возникает, когда прерывается загрузка аудио/видео. Это событие возникает именно когда загрузка медиа данных была прервана (отменена), а не, потому что возникла ошибка.
  • error — событие возникает, когда произошла ошибка при загрузке аудио/видео.
  • stalled — событие возникает, когда браузер пытается получить медиа данные, но данные недоступны.
  • suspend — событие возникает, когда браузер не может получить медиа данные, т.е. загрузка медиа останавливается по какой-то причине.
  • loadstart — событие происходит, когда браузер начинает искать указанное аудио/видео, т.е. когда начинается процесс загрузки.
  • durationchange — событие возникает, когда изменяется длительность аудио/видео. Если аудио/видео загружается, то длительность будет меняться от значения «NaN» до фактической длительности аудио/видео.
  • loadedmetadata — событие возникает, когда метаданные для указанного аудио/видео загружены. Метаданные аудио/видео состоят из: длительности, размера (только видео) и текстовой дорожки.
  • loadeddata — событие возникает, после того как первый кадр медиа загрузился.
  • progress — событие происходит, когда браузер загружает указанное аудио/видео.
  • canplay — событие возникает, когда браузер может начать воспроизведение указанного аудио/видео (т.е. когда буферизация потока аудио/видео достаточна для того чтобы браузер мог начать его воспроизводить).
  • canplaythrough — событие возникает в тот момент времени, когда браузер может проигрывать указанное медиа без остановки на буферизацию.
  • ended — событие происходит, когда воспроизведение аудио/видео завершилось (достигло конца). Это событие может использоваться для вывода сообщений типа «Спасибо за внимание», «Спасибо за просмотр» и др.
  • pause — событие происходит, когда воспроизведение аудио/видео приостановлено пользователем или с помощью кода (программно).
  • play — событие происходит, когда начинается воспроизведение аудио/видео. Оно также происходит, когда аудио/видео было снято с паузы и начинает воспроизводиться.
  • playing — событие происходит, когда аудио/видео воспроизводится после того как оно было поставлено на паузу или остановилось для буферизации.
  • ratechange — событие происходит, когда изменяется скорость воспроизведения аудио/видео.
  • seeking — событие происходит, когда пользователь начинает перемещение ползунка (переход) к новой временной позиции проигрываемого аудио/видео.
  • seeked — событие происходит, когда пользователь закончил перемещение ползунка (переход) в новую временную позицию проигрываемого аудио/видео. Событие seeked противоположно событию seeking. Для того чтобы получить текущую позицию воспроизведения, используйте свойство currentTime объекта Audio/Video.
  • timeupdate — событие происходит при изменении временной позиции воспроизводимого аудио/видео.
    Это событие происходит:
    • при воспроизведении потока аудио/видео.
    • при перемещении ползунка в новую временную позицию воспроизводимого аудио/видео.
    Событие timeupdate часто используется вместе со свойством объекта Audio/Video currentTime, которое возвращает текущую временную позицию воспроизводимого аудио/видео в секундах.
  • volumechange – событие происходит каждый раз при изменении громкости воспроизводимого потока видео/аудио.
    Это событие происходит, при:
    • увеличении или уменьшении громкости;
    • отключении или включении звука.
  • waiting — событие происходит, когда видео останавливается для буферизации.
  • toggle — событие происходит, когда пользователь открывает или закрывает элемент details. Элемент details предназначен для создания дополнительных сведений, которые пользователь при необходимости может просматривать или скрывать.
  • wheel — событие происходит при прокручивании колеса мыши вперёд или назад над элементом.
  1. Является ли событие «Нажатие клавиши на клавиатуре (onkeypress)» сложным? И если является, то в результате, каких простых событий оно возникает?
  2. Например, у Вас есть 2 элемента р и пользователь перемещает мышку с области, принадлежащей одному элементу р, на область, принадлежащую другому элементу р. То, какие в этом случае возникают события, и какие элементы их генерируют?

Ссылка на событие | MDN

Тип события Описание Документация
Анимация

События, связанные с API веб-анимации.

Используется для ответа на изменения статуса анимации (например, когда анимация начинается или заканчивается).

Анимационные события запущены в Document , Window , HTMLElement .
Асинхронная выборка данных

События, связанные с получением данных.

События, запущенные на AbortSignal , XMLHttpRequest , FileReader .
Буфер обмена

События, связанные с API буфера обмена.

Используется для уведомления, когда содержимое вырезано, скопировано или вставлено.

События, запущенные в документе , элементе , окне .
Состав

События, связанные с композицией; ввод текста «косвенно» (вместо обычного нажатия на клавиатуру).

Например, текст, введенный с помощью механизма преобразования речи в текст или с помощью специальных комбинаций клавиш, которые изменяют нажатия клавиш для представления новых символов на другом языке.

События, запущенные на элементе .
CSS переход

События, связанные с переходами CSS.

Предоставляет события уведомления, когда переходы CSS начинаются, останавливаются, отменяются и т. Д.

События, запущенные в Document , HTMLElement , Window .
База данных

События, связанные с операциями с базой данных: открытие, закрытие, транзакции, ошибки и т. Д.

События, запущенные на IDBDatabase , IDBOpenDBRequest , IDBRequest , IDBTransaction .
Drag’n’drop, Колесо

События, связанные с использованием HTML-API перетаскивания и событий колеса.

События перетаскивания и колесика являются производными от событий мыши.Хотя они запускаются при использовании колесика мыши или перетаскивания, они также могут использоваться с другим подходящим оборудованием.

События перетаскивания, запущенные в документе

События Wheel запущены в документе и элементе

Фокус

События, связанные с получением и потерей фокуса элементами.

События, запущенные для элемента , окна .
Форма

События, связанные с созданием, сбросом и отправкой форм.

События, запущенные на HTMLFormElement .
Полноэкранный режим

События, связанные с полноэкранным API.

Используется для уведомления при переходе между полноэкранным и оконным режимами, а также об ошибках, возникающих во время этого перехода.

События, инициированные в документе , элемент .
Геймпад

События, связанные с Gamepad API.

События, запущенные в Window .
История

События, связанные с API истории.

События, запущенные в Window .
Управление отображением содержимого HTML-элемента

События, связанные с изменением состояния отображения или текстового элемента.

События, запущенные для HTMLDetailsElement , HTMLDialogElement , HTMLSlotElement .
Входы

События, связанные с элементами ввода HTML, например. ,