abort | UIEvent | DOM L3 | The loading of a resource has been aborted. |
abort | ProgressEvent | Progress and XMLHttpRequest | Progression has been terminated (not due to an error). |
abort | Event | IndexedDB | A transaction has been aborted. |
afterprint | Event | HTML5 | The associated document has started printing or the print preview has been closed. |
animationcancel | AnimationEvent Это экспериментальное API, которое не должно использоваться в рабочем коде. | CSS Animations | A CSS animation has aborted. |
animationend | AnimationEvent Это экспериментальное API, которое не должно использоваться в рабочем коде. | CSS Animations | A CSS animation has completed. |
animationiteration | AnimationEvent Это экспериментальное API, которое не должно использоваться в рабочем коде. | CSS Animations | A CSS animation is repeated. |
animationstart | AnimationEvent Это экспериментальное API, которое не должно использоваться в рабочем коде. | CSS Animations | A CSS animation has started. |
appinstalled | Event | Web App Manifest | A web application is successfully installed as a progressive web app. |
audioprocess | AudioProcessingEvent Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать. | Web Audio API Определение ‘audioprocess’ в этой спецификации. | The input buffer of a ScriptProcessorNode is ready to be processed. |
audioend | Event | Web Speech API | The user agent has finished capturing audio for speech recognition. |
audiostart Это экспериментальное API, которое не должно использоваться в рабочем коде. | Event | Web Speech API | The user agent has started to capture audio for speech recognition. |
beforeprint | Event | HTML5 | The associated document is about to be printed or previewed for printing. |
beforeunload | BeforeUnloadEvent | HTML5 | The window, the document and its resources are about to be unloaded. |
beginEvent | TimeEvent | SVG | A SMIL animation element begins. |
blocked | IndexedDB | An open connection to a database is blocking a versionchange transaction on the same database. | |
blur | FocusEvent Это экспериментальное API, которое не должно использоваться в рабочем коде. | DOM L3 | An element has lost focus (does not bubble). |
boundary Это экспериментальное API, которое не должно использоваться в рабочем коде. | SpeechSynthesisEvent | Web Speech API | The spoken utterance reaches a word or sentence boundary |
canplay | Event | HTML5 media | The 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 media | The user agent can play the media up to its end without having to stop for further buffering of content. |
change | Event | DOM L2, HTML5 | The change event is fired for <input> , <select> , and <textarea> elements when a change to the element’s value is committed by the user. |
chargingchange | Event | Battery status | The battery begins or stops charging. |
chargingtimechange | Event | Battery status | The chargingTime attribute has been updated. |
click | MouseEvent | DOM L3 | A pointing device button has been pressed and released on an element. |
close | Event | WebSocket | A WebSocket connection has been closed. |
complete | IndexedDB | A transaction successfully completed. | |
complete | OfflineAudioCompletionEvent Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать. | Web Audio API Определение ‘OfflineAudioCompletionEvent’ в этой спецификации. | The rendering of an OfflineAudioContext is terminated. |
compositionend | CompositionEvent | DOM L3 | The composition of a passage of text has been completed or canceled. |
compositionstart | CompositionEvent | DOM L3 | The composition of a passage of text is prepared (similar to keydown for a keyboard input, but works with other inputs such as speech recognition). |
compositionupdate | CompositionEvent | DOM L3 | A character is added to a passage of text being composed. |
contextmenu | MouseEvent | HTML5 | The right button of the mouse is clicked (before the context menu is displayed). |
copy | ClipboardEvent Это экспериментальное API, которое не должно использоваться в рабочем коде. | Clipboard | The text selection has been added to the clipboard. |
cut | ClipboardEvent Это экспериментальное API, которое не должно использоваться в рабочем коде. | Clipboard | The text selection has been removed from the document and added to the clipboard. |
dblclick | MouseEvent | DOM L3 | A pointing device button is clicked twice on an element. |
devicechange | Event | A media device such as a camera, microphone, or speaker is connected or removed from the system. | |
devicemotion | DeviceMotionEvent Это экспериментальное API, которое не должно использоваться в рабочем коде. | Device Orientation Events | Fresh data is available from a motion sensor. |
deviceorientation | DeviceOrientationEvent Это экспериментальное API, которое не должно использоваться в рабочем коде. | Device Orientation Events | Fresh data is available from an orientation sensor. |
dischargingtimechange | Event | Battery status | The dischargingTime attribute has been updated. |
DOMActivate Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать. | UIEvent | DOM L3 | A button, link or state changing element is activated (use click instead). |
DOMAttributeNameChanged Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать. | MutationNameEvent | DOM L3 Removed | The name of an attribute changed (use mutation observers instead). |
DOMAttrModified Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать. | MutationEvent | DOM L3 | The value of an attribute has been modified (use mutation observers instead). |
DOMCharacterDataModified Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать. | MutationEvent | DOM L3 | A text or another CharacterData has changed (use mutation observers instead). |
DOMContentLoaded | Event | HTML5 | The document has finished loading (but not its dependent resources). |
DOMElementNameChanged Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать. | MutationNameEvent | DOM L3 Removed | The name of an element changed (use mutation observers instead). |
DOMFocusIn Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать. | FocusEvent Это экспериментальное API, которое не должно использоваться в рабочем коде. | DOM L3 | An element has received focus (use focus or focusin instead). |
DOMFocusOut Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать. | FocusEvent Это экспериментальное API, которое не должно использоваться в рабочем коде. | DOM L3 | An element has lost focus (use blur or focusout instead). |
DOMNodeInserted Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать. | MutationEvent | DOM L3 | A node has been added as a child of another node (use mutation observers instead). |
DOMNodeInsertedIntoDocument Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать. | MutationEvent | DOM L3 | A node has been inserted into the document (use mutation observers instead). |
DOMNodeRemoved Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать. | MutationEvent | DOM L3 | A node has been removed from its parent node (use mutation observers instead). |
DOMNodeRemovedFromDocument Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать. | MutationEvent | DOM L3 | A node has been removed from the document (use mutation observers instead). |
DOMSubtreeModified Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать. | MutationEvent | DOM L3 | A change happened in the document (use mutation observers instead). |
drag | DragEvent | HTML5 | An element or text selection is being dragged (every 350ms). |
dragend | DragEvent | HTML5 | A drag operation is being ended (by releasing a mouse button or hitting the escape key). |
dragenter | DragEvent | HTML5 | A dragged element or text selection enters a valid drop target. |
dragleave | DragEvent | HTML5 | A dragged element or text selection leaves a valid drop target. |
dragover | DragEvent | HTML5 | An element or text selection is being dragged over a valid drop target (every 350ms). |
dragstart | DragEvent | HTML5 | The user starts dragging an element or text selection. |
drop | DragEvent | HTML5 | An element is dropped on a valid drop target. |
durationchange | Event | HTML5 media | The duration attribute has been updated. |
emptied | Event | HTML5 media | The 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, которое не должно использоваться в рабочем коде. | Event | Web Speech API | The speech recognition service has disconnected. |
end Это экспериментальное API, которое не должно использоваться в рабочем коде. | SpeechSynthesisEvent | Web Speech API | The utterance has finished being spoken. |
ended | Event | HTML5 media | Playback has stopped because the end of the media was reached. |
ended | Event | Web Audio API | Playback has stopped because the end of the media was reached. |
endEvent | TimeEvent | SVG | A SMIL animation element ends. |
error | UIEvent | DOM L3 | A resource failed to load. |
error | ProgressEvent | Progress and XMLHttpRequest | Progression has failed. |
error | Event | WebSocket | A WebSocket connection has been closed with prejudice (some data couldn’t be sent for example). |
error | Event | Server Sent Events | An event source connection has been failed. |
error | Event | IndexedDB | A request caused an error and failed. |
error Это экспериментальное API, которое не должно использоваться в рабочем коде. | Event | Web Speech API | A speech recognition error occurs. |
error | SpeechSynthesisErrorEvent | Web Speech API | An error occurs that prevents the utterance from being successfully spoken. |
focus | FocusEvent Это экспериментальное API, которое не должно использоваться в рабочем коде. | DOM L3 | An element has received focus (does not bubble). |
focusin | FocusEvent Это экспериментальное API, которое не должно использоваться в рабочем коде. | DOM L3 | An element is about to receive focus (bubbles). |
focusout | FocusEvent Это экспериментальное API, которое не должно использоваться в рабочем коде. | DOM L3 | An element is about to lose focus (bubbles). |
fullscreenchange | Event | Full Screen | An element was turned to fullscreen mode or back to normal mode. |
fullscreenerror | Event | Full Screen | It was impossible to switch to fullscreen mode for technical reasons or because the permission was denied. |
gamepadconnected | GamepadEvent Это экспериментальное API, которое не должно использоваться в рабочем коде. | Gamepad | A gamepad has been connected. |
gamepaddisconnected | GamepadEvent Это экспериментальное API, которое не должно использоваться в рабочем коде. | Gamepad | A gamepad has been disconnected. |
gotpointercapture | PointerEvent | Pointer Events | Element receives pointer capture. |
hashchange | HashChangeEvent | HTML5 | The fragment identifier of the URL has changed (the part of the URL after the #). |
lostpointercapture | PointerEvent | Pointer Events | Element lost pointer capture. |
input | Event | HTML5 | The value of an element changes or the content of an element with the attribute contenteditable is modified. |
invalid | Event | HTML5 | A submittable element has been checked and doesn’t satisfy its constraints. |
keydown | KeyboardEvent | DOM L3 | A key is pressed down. |
keypress Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать. | KeyboardEvent | DOM L3 | A key is pressed down and that key normally produces a character value (use input instead). |
keyup | KeyboardEvent | DOM L3 | A key is released. |
languagechange Это экспериментальное API, которое не должно использоваться в рабочем коде. | Event | HTML 5.1 Определение ‘NavigatorLanguage.languages’ в этой спецификации. | The user’s preferred languages have changed. |
levelchange | Event | Battery status | The level attribute has been updated. |
load | UIEvent | DOM L3 | A resource and its dependent resources have finished loading. |
load | ProgressEvent | Progress and XMLHttpRequest | Progression has been successful. |
loadeddata | Event | HTML5 media | The first frame of the media has finished loading. |
loadedmetadata | Event | HTML5 media | The metadata has been loaded. |
loadend | ProgressEvent | Progress and XMLHttpRequest | Progress has stopped (after «error», «abort» or «load» have been dispatched). |
loadstart | ProgressEvent | Progress and XMLHttpRequest | Progress has begun. |
mark Это экспериментальное API, которое не должно использоваться в рабочем коде. | SpeechSynthesisEvent | Web Speech API | The spoken utterance reaches a named SSML «mark» tag. |
message | MessageEvent | WebSocket | A message is received through a WebSocket. |
message | MessageEvent | Web Workers | A message is received from a Web Worker. |
message | MessageEvent | Web Messaging | A message is received from a child (i)frame or a parent window. |
message | MessageEvent | Server Sent Events | A message is received through an event source. |
messageerror | MessageEvent | MessagePort , Web Workers, Broadcast Channel, Window | A message error is raised when a message is received by an object. |
message Это экспериментальное API, которое не должно использоваться в рабочем коде. | ServiceWorkerMessageEvent or ExtendableMessageEvent , depending on context. | Service Workers | A message is received from a service worker, or a message is received in a service worker from another context. |
mousedown | MouseEvent | DOM L3 | A pointing device button (usually a mouse) is pressed on an element. |
mouseenter | MouseEvent | DOM L3 | A pointing device is moved onto the element that has the listener attached. |
mouseleave | MouseEvent | DOM L3 | A pointing device is moved off the element that has the listener attached. |
mousemove | MouseEvent | DOM L3 | A pointing device is moved over an element. |
mouseout | MouseEvent | DOM L3 | A pointing device is moved off the element that has the listener attached or off one of its children. |
mouseover | MouseEvent | DOM L3 | A pointing device is moved onto the element that has the listener attached or onto one of its children. |
mouseup | MouseEvent | DOM L3 | A pointing device button is released over an element. |
nomatch Это экспериментальное API, которое не должно использоваться в рабочем коде. | SpeechRecognitionEvent | Web Speech API | The speech recognition service returns a final result with no significant recognition. |
notificationclick | NotificationEvent Это экспериментальное API, которое не должно использоваться в рабочем коде. | Notifications API Определение ‘onnotificationclick’ в этой спецификации. | A system notification spawned by ServiceWorkerRegistration.showNotification() has been clicked. |
offline | Event | HTML5 offline | The browser has lost access to the network. |
online | Event | HTML5 offline | The browser has gained access to the network (but particular websites might be unreachable). |
open | Event | WebSocket | A WebSocket connection has been established. |
open | Event | Server Sent Events | An event source connection has been established. |
orientationchange | Event | Screen Orientation | The orientation of the device (portrait/landscape) has changed |
pagehide | PageTransitionEvent | HTML5 | A session history entry is being traversed from. |
pageshow | PageTransitionEvent | HTML5 | A session history entry is being traversed to. |
paste | ClipboardEvent Это экспериментальное API, которое не должно использоваться в рабочем коде. | Clipboard | Data has been transferred from the system clipboard to the document. |
pause | Event | HTML5 media | Playback has been paused. |
pause Это экспериментальное API, которое не должно использоваться в рабочем коде. | SpeechSynthesisEvent | Web Speech API | The utterance is paused part way through. |
pointercancel | PointerEvent | Pointer Events | The pointer is unlikely to produce any more events. |
pointerdown | PointerEvent | Pointer Events | The pointer enters the active buttons state. |
pointerenter | PointerEvent | Pointer Events | Pointing device is moved inside the hit-testing boundary. |
pointerleave | PointerEvent | Pointer Events | Pointing device is moved out of the hit-testing boundary. |
pointerlockchange | Event | Pointer Lock | The pointer was locked or released. |
pointerlockerror | Event | Pointer Lock | It was impossible to lock the pointer for technical reasons or because the permission was denied. |
pointermove | PointerEvent | Pointer Events | The pointer changed coordinates. |
pointerout | PointerEvent | Pointer Events | The pointing device moved out of hit-testing boundary or leaves detectable hover range. |
pointerover | PointerEvent | Pointer Events | The pointing device is moved into the hit-testing boundary. |
pointerup | PointerEvent | Pointer Events | The pointer leaves the active buttons state. |
play | Event | HTML5 media | Playback has begun. |
playing | Event | HTML5 media | Playback is ready to start after having been paused or delayed due to lack of data. |
popstate | PopStateEvent | HTML5 | A session history entry is being navigated to (in certain cases). |
progress | ProgressEvent | Progress and XMLHttpRequest | In progress. |
push | PushEvent Это экспериментальное API, которое не должно использоваться в рабочем коде. | Push API | A Service Worker has received a push message. |
pushsubscriptionchange | PushEvent Это экспериментальное API, которое не должно использоваться в рабочем коде. | Push API | A PushSubscription has expired. |
ratechange | Event | HTML5 media | The playback rate has changed. |
readystatechange | Event | HTML5 and XMLHttpRequest | The readyState attribute of a document has changed. |
repeatEvent | TimeEvent | SVG | A SMIL animation element is repeated. |
reset | Event | DOM L2, HTML5 | A form is reset. |
resize | UIEvent | DOM L3 | The document view has been resized. |
resourcetimingbufferfull | Performance | Resource Timing | The browser’s resource timing buffer is full. |
result Это экспериментальное API, которое не должно использоваться в рабочем коде. | SpeechRecognitionEvent Это экспериментальное API, которое не должно использоваться в рабочем коде. | Web Speech API | The 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 API | A paused utterance is resumed. |
scroll | UIEvent | DOM L3 | The document view or an element has been scrolled. |
seeked | Event | HTML5 media | A seek operation completed. |
seeking | Event | HTML5 media | A seek operation began. |
select | UIEvent | DOM L3 | Some text is being selected. |
selectstart Это экспериментальное API, которое не должно использоваться в рабочем коде. | Event | Selection API | A selection just started. |
selectionchange Это экспериментальное API, которое не должно использоваться в рабочем коде. | Event | Selection API | The selection in the document has been changed. |
show | MouseEvent | HTML5 | A contextmenu event was fired on/bubbled to an element that has a contextmenu attribute |
slotchange | Event | DOM | The node contents of a HTMLSlotElement (<slot> ) have changed. |
soundend Это экспериментальное API, которое не должно использоваться в рабочем коде. | Event | Web Speech API | Any sound — recognisable speech or not — has stopped being detected. |
soundstart Это экспериментальное API, которое не должно использоваться в рабочем коде. | Event | Web Speech API | Any sound — recognisable speech or not — has been detected. |
speechend Это экспериментальное API, которое не должно использоваться в рабочем коде. | Event | Web Speech API | Speech recognised by the speech recognition service has stopped being detected. |
speechstart Это экспериментальное API, которое не должно использоваться в рабочем коде. | Event | Web Speech API | Sound that is recognised by the speech recognition service as speech has been detected. |
stalled | Event | HTML5 media | The user agent is trying to fetch media data, but data is unexpectedly not forthcoming. |
start Это экспериментальное API, которое не должно использоваться в рабочем коде. | Event | Web Speech API | The speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current SpeechRecognition . |
start | SpeechSynthesisEvent | Web Speech API | The utterance has begun to be spoken. |
storage | StorageEvent | Web Storage | A storage area (localStorage or sessionStorage) has changed. |
submit | Event | DOM L2, HTML5 | A form is submitted. |
success | Event | IndexedDB | A request successfully completed. |
suspend | Event | HTML5 media | Media data loading has been suspended. |
SVGAbort | SVGEvent | SVG | Page loading has been stopped before the SVG was loaded. |
SVGError | SVGEvent | SVG | An error has occurred before the SVG was loaded. |
SVGLoad | SVGEvent | SVG | An SVG document has been loaded and parsed. |
SVGResize | SVGEvent | SVG | An SVG document is being resized. |
SVGScroll | SVGEvent | SVG | An SVG document is being scrolled. |
SVGUnload | SVGEvent | SVG | An SVG document has been removed from a window or frame. |
SVGZoom | SVGZoomEvent | SVG | An SVG document is being zoomed. |
timeout | ProgressEvent | XMLHttpRequest | |
timeupdate | Event | HTML5 media | The time indicated by the currentTime attribute has been updated. |
touchcancel | TouchEvent | Touch Events | A touch point has been disrupted in an implementation-specific manners (too many touch points for example). |
touchend | TouchEvent | Touch Events | A touch point is removed from the touch surface. |
touchmove | TouchEvent | Touch Events | A touch point is moved along the touch surface. |
touchstart | TouchEvent | Touch Events | A touch point is placed on the touch surface. |
transitionend | TransitionEvent Это экспериментальное API, которое не должно использоваться в рабочем коде. | CSS Transitions | A CSS transition has completed. |
unload | UIEvent | DOM L3 | The document or a dependent resource is being unloaded. |
upgradeneeded | IndexedDB | An attempt was made to open a database with a version number higher than its current version. A versionchange transaction has been created. | |
userproximity | UserProximityEvent Это экспериментальное API, которое не должно использоваться в рабочем коде. | Proximity Sensor | Fresh data is available from a proximity sensor (indicates whether the nearby object is near the device or not). |
voiceschanged Это экспериментальное API, которое не должно использоваться в рабочем коде. | Event | Web Speech API | The list of SpeechSynthesisVoice objects that would be returned by the SpeechSynthesis.getVoices() method has changed (when the voiceschanged event fires.) |
versionchange | IndexedDB | A versionchange transaction completed. | |
visibilitychange | Event | Page visibility | The content of a tab has become visible or has been hidden. |
volumechange | Event | HTML5 media | The volume has changed. |
waiting | Event | HTML5 media | Playback has stopped because of a temporary lack of data. |
wheel | WheelEvent | DOM L3 | A 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) частично полезные для программистов, желащих работать с событиями:
Событие | Обработчик события | Поддерживающие 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 событий:
Событие | Описание |
---|---|
onchange | HTML элемент был изменен |
onclick | Пользователь кликнул мышкой на HTML элемент |
onmouseover | Пользователь навел мышку на HTML элемент |
onmouseout | Пользователь вывел мышку за пределы HTML элемента |
onkeydown | Пользователь нажал на клавишу клавиатуры |
onload | Браузер закончил загружать страницу |
Конечно, список событий гораздо длиннее. Смотрите раздел События HTML DOM и HTML атрибуты-события.
Что может делать JavaScript с событиями?
Обработчик событий можно использовать для обработки и проверки пользовательского ввода, действий пользователя и браузера:
- Выполнять действия повторяющиеся после загрузки страницы
- Выполнять действия повторяющиеся после закрытия страницы
- Действия, которые должны выполняться при нажатии пользователем на кнопку
- Проверка данных, введенных пользователем в поле формы
- И многое другое . ..
В JavaScript существует множество способов работать с событиями:
- HTML атрибуты-события могут напрямую выполнять код JavaScript
- HTML атрибуты-события могут вызывать функции 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 — событие происходит при прокручивании колеса мыши вперёд или назад над элементом.
- Является ли событие «Нажатие клавиши на клавиатуре (
onkeypress
)» сложным? И если является, то в результате, каких простых событий оно возникает? - Например, у Вас есть 2 элемента
р
и пользователь перемещает мышку с области, принадлежащей одному элементур
, на область, принадлежащую другому элементур
. То, какие в этом случае возникают события, и какие элементы их генерируют?
Тип события | Описание | Документация |
---|---|---|
Анимация | События, связанные с 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, например. |
События, запущенные на HTMLElement , HTMLInputElement . |
Клавиатура |
События, связанные с использованием клавиатуры. Используется для уведомления, когда клавиши перемещаются вверх, вниз или просто нажимаются. |
События, инициированные в документе , элемент . |
Погрузочно-разгрузочные документы |
События, связанные с загрузкой и разгрузкой документов. |
События срабатывают в документе |
Манифест |
События, связанные с установкой манифестов прогрессивных веб-приложений. |
События, запущенные в Window . |
Медиа |
События, связанные с использованием мультимедиа (включая Media Capture and Streams API, Web Audio API, Picture-in-Picture API и т. Д.). |
События, запущенные на ScriptProcessorNode , HTMLMediaElement , AudioTrackList , AudioScheduledSourceNode , MediaRecorder , MediaStream , MediaStreamTrack , VideoTrackList lement , Элемент / аудио, Элемент / видео.
|
Сообщения |
События, связанные с окном, получающим сообщение из другого контекста просмотра. |
События, запущенные в Window . |
Мышь |
События, связанные с использованием компьютерной мыши. Используется для уведомления при щелчке мышью, двойном щелчке, событиях вверх и вниз, щелчке правой кнопкой мыши, перемещении в элемент и из элемента, выделении текста и т. Д. События указателя предоставляют аппаратно-независимую альтернативу событиям мыши. События перетаскивания и колесика основаны на событиях мыши. |
События мыши запущены на элементе |
Сеть / Подключение |
События, связанные с получением и потерей сетевого подключения. |
События, запущенные в События, запущенные на |
Платежи |
События, связанные с API запроса платежа. |
События, запущенные для |
Производительность |
События, связанные с API времени высокого разрешения, API временной шкалы производительности, API времени навигации, API времени пользователя и API синхронизации ресурсов. |
События запущены на |
Указатель |
События, связанные с API событий указателя. Предоставляет аппаратно-независимые уведомления от указывающих устройств, включая мышь, сенсорный экран, перо / стилус. |
События, запущенные в Document , HTMLElement . |
Печать |
События, связанные с печатью. |
События, запущенные в Window . |
Отклонение обещания |
События, отправляемые в глобальный контекст сценария, когда любое обещание JavaScript отклоняется. |
События, запущенные в Window . |
Розетки |
События, связанные с API WebSockets. |
События запущены на Websocket . |
SVG |
События, связанные с изображениями SVG. |
События, запущенные на |
Выбор текста |
События, связанные с выделением текста. |
События инициированы в |
Сенсорный |
События, связанные с Touch Events API. Предоставляет события уведомления при взаимодействии с сенсорным экраном (т. Е. С помощью пальца или стилуса). Не имеет отношения к Force Touch API. |
События, инициированные в документе , элемент . |
Виртуальная реальность |
События, связанные с API устройства WebXR. |
События, запущенные на XRSystem , XRSession , XRReferenceSpace . |
RTC (связь в реальном времени) |
События, связанные с API WebRTC. |
События, запущенные на RTCDataChannel , RTCDTMFSender , RTCIceTransport , RTCPeerConnection . |
События, отправленные сервером |
События, связанные с сервером отправленных событий API. |
События, запущенные на EventSource .
|
Выступление |
События, связанные с Web Speech API. |
События, запущенные на SpeechSynthesisUtterance . |
Рабочие |
События, связанные с API Web Workers, API Service Worker, API Broadcast Channel и API обмена сообщениями. Используется для ответа на новые сообщения и ошибки отправки сообщений. Сервисные работники также могут быть уведомлены о других событиях, включая push-уведомления, нажатие пользователей на отображаемые уведомления, аннулирование push-подписки, удаление элементов из индекса содержимого и т. Д. |
События, запущенные на ServiceWorkerGlobalScope , DedicatedWorkerGlobalScope , SharedWorkerGlobalScope , WorkerGlobalScope , Worker , WorkerGlobalScope , BroadcastChannel , MessagePort . |
Элемент: событие щелчка — веб-API
Элемент получает событие click
, когда кнопка указывающего устройства (например, основная кнопка мыши) одновременно нажата и отпущена, когда указатель находится внутри элемента.
Если кнопка нажата на одном элементе и указатель перемещается за пределы элемента до того, как кнопка будет отпущена, событие запускается на самом конкретном элементе-предке, который содержал оба элемента.
click
срабатывает после срабатывания событий mousedown
и mouseup
в указанном порядке.
Объект MouseEvent
, переданный в обработчик событий для щелчка.
имеет свойство detail
, установленное на количество нажатий на цель
. Другими словами, деталь
будет 2 для двойного щелчка, 3 для тройного щелчка и так далее. Этот счетчик сбрасывается через короткий промежуток времени без каких-либо щелчков; Специфика продолжительности этого интервала может варьироваться от браузера к браузеру и на разных платформах.На интервал также могут влиять предпочтения пользователя; например, параметры доступности могут увеличить этот интервал, чтобы упростить выполнение нескольких щелчков мышью с адаптивными интерфейсами.
Internet Explorer
Internet Explorer 8 и 9 страдают от ошибки, при которой элементы с вычисленным цветом фона
или прозрачным
, которые накладываются поверх других элементов, не будут получать события click
. Вместо этого любые события click
будут запущены в базовых элементах.См. Этот живой пример для демонстрации.
Известные обходные пути для этой ошибки:
Safari Mobile
Safari Mobile 7. 0+ (и, вероятно, более ранние версии тоже) страдает ошибкой, из-за которой события Известные обходные пути для этой ошибки: Safari Mobile считает, что следующие элементы обычно интерактивны (и поэтому эта ошибка не влияет на них): В этом примере отображается количество последовательных нажатий на Попробуйте быстро и многократно нажимать кнопку, чтобы увеличить количество нажатий. Если вы сделаете перерыв между щелчками, счетчик сбрасывается. Таблицы BCD загружаются только в браузере HTML-события — это «вещи» , которые происходят с элементами HTML. Когда JavaScript используется на HTML-страницах, JavaScript может
«реагировать» на
эти события. Событие HTML может быть чем-то, что делает браузер или пользователем. Вот несколько примеров событий HTML: Часто, когда случаются события, вы можете захотеть что-то сделать. JavaScript позволяет выполнять код при обнаружении событий. HTML позволяет добавлять атрибуты обработчика событий, с кодом JavaScript , в элементы HTML. В одинарных кавычках:
< элемент
событие = ‘ некоторый JavaScript ‘ > В двойных кавычках:
< элемент
событие = « некоторый JavaScript » > В следующем примере атрибут
В приведенном выше примере код JavaScript изменяет содержимое
элемент с. В следующем примере код изменяет содержимое
собственный элемент (используя
часто состоит из нескольких строк. Чаще всего можно увидеть функции вызова атрибутов событий: Вот список некоторых распространенных событий HTML: Список намного длиннее: W3Schools Справочник по JavaScript События HTML DOM. Обработчики событий могут использоваться для обработки и проверки пользовательского ввода, действий пользователя,
и действия браузера: Для работы JavaScript с событиями можно использовать множество различных методов: Вы узнаете намного больше о событиях и обработчиках событий в главах HTML DOM. События HTML DOM позволяют JavaScript регистрировать различные обработчики событий на
элементы в HTML-документе. События обычно используются в сочетании с функциями, и функция не будет выполняться до того, как произойдет событие
(например, когда пользователь нажимает кнопку). Пузырьки: Да Возможность отмены: Нет Пузырьки: Да Возможность отмены: Нет Пузыри: Нет Возможность отмены: Нет Пузырьки: Да Возможность отмены: Нет Объект события: — Пузыри: Да Возможность отмены: Частично Пузыри: Да Возможность отмены: Да Пузыри: Да Возможность отмены: Да Пузыри: Да Возможность отмены: Да Пузыри: Да Возможность отмены: Да Объект события: — Пузыри: Да Возможность отмены: Да Пузыри: Нет Возможность отмены: Нет Пузырьки: Нет Возможность отмены: Да Пузыри: Да Возможность отмены: Да Объект события: — Пузыри: Нет Возможность отмены: Нет Пузырьки: Нет Возможность отмены: Да Пузырьки: Да Возможность отмены: Нет Объект события: — Пузыри: Нет Возможность отмены: Нет Пузыри: Нет Возможность отмены: Нет Пузыри: Да Возможность отмены: Да Пузыри: Да Возможность отмены: Да Пузыри: Да Возможность отмены: Да Объект события: — Пузыри: Да Возможность отмены: Да Пузыри: Да Возможность отмены: Да Пузырьки: Да Возможность отмены: Нет Объект события: — Пузырьки: Да Возможность отмены: Нет Объект события: — Пузырьки: Да Возможность отмены: Нет Объект события: — Пузыри: Да Возможность отмены: Да Пузырьки: Да Возможность отмены: Нет Пузыри: Да Возможность отмены: Да Пузырьки: Да Возможность отмены: Нет Пузырьки: Да Возможность отмены: Нет Пузырьки: Да Возможность отмены: Нет Пузырьки: Да Возможность отмены: Нет Пузыри: Нет Возможность отмены: Нет Пузырьки: Да Возможность отмены: Нет Пузыри: Нет Возможность отмены: Нет Пузырьки: Да Возможность отмены: Нет Пузыри: Нет Возможность отмены: Нет Пузырьки: Да Возможность отмены: Нет Пузыри: Да Возможность отмены: Да Пузыри: Да Возможность отмены: Да Пузыри: Да Возможность отмены: Да Пузыри: Да Возможность отмены: Да Пузыри: Да Возможность отмены: Да Пузыри: Да Возможность отмены: Да Пузыри: Да Возможность отмены: Да Пузыри: Да Возможность отмены: Да Пузыри: Да Возможность отмены: Да Пузыри: Да Возможность отмены: Да Пузырьки: Нет Возможность отмены: Да Пузырьки: Нет Возможность отмены: Да Объект события: — Пузырьки: Да Возможность отмены: Нет Объект события: — Пузыри: Нет Возможность отмены: Нет Объект события: — Пузырьки: Нет Возможность отмены: Да Пузыри: Нет Возможность отмены: Нет Пузырьки: Да Возможность отмены: Нет Пузырьки: Да Возможность отмены: Нет Пузырьки: Да Возможность отмены: Нет Пузыри: Да Возможность отмены: Да Пузыри: Нет Возможность отмены: Нет Пузыри: Да Возможность отмены: Да Пузыри: Да Возможность отмены: Да Пузырьки: Да Возможность отмены: Нет Пузыри: Нет Возможность отмены: Нет Пузыри: Нет Возможность отмены: Нет Объект события: — Пузырьки: Нет Возможность отмены: Да Пузыри: Да Возможность отмены: Да Пузыри: Нет Возможность отмены: Нет Пузыри: Нет Возможность отмены: Нет Пузырьки: Да Возможность отмены: Нет Пузырьки: Да Возможность отмены: Нет Пузыри: Да Возможность отмены: Да Пузыри: Да Возможность отмены: Да Пузыри: Да Возможность отмены: Да Пузырьки: Да Возможность отмены: Нет Объект события: — Пузырьки: Да Возможность отмены: Нет Объект события: — Пузыри: Да Возможность отмены: Да Объект события: — Пузыри: Нет Возможность отмены: Нет Пузыри: Нет Возможность отмены: Нет Пузыри: Нет Возможность отмены: Нет Пузыри: Нет Возможность отмены: Нет Пузыри: Да Возможность отмены: Да Пузыри: Нет Возможность отмены: Нет Объект события: — Пузыри: Нет Возможность отмены: Нет Пузыри: Нет Возможность отмены: Нет Пузыри: Нет Возможность отмены: Нет Объект события: — Пузыри: Нет Возможность отмены: Нет Пузырьки: Нет Возможность отмены: Да Пузыри: Нет Возможность отмены: Нет Пузырьки: Да Возможность отмены: Нет Объект события: — Пузыри: Да Возможность отмены: Да Объект события: — Пузырьки: Да Возможность отмены: Нет Объект события: — Пузырьки: Нет Возможность отмены: Да Объект события: — Пузырьки: Да Возможность отмены: Нет Объект события: — Пузырьки: Да Возможность отмены: Нет Объект события: — Пузыри: Нет Возможность отмены: Нет Пузыри: Нет Возможность отмены: Нет Пузырьки: Нет Возможность отмены: Да Пузыри: Нет Возможность отмены: Нет Пузыри: Да Возможность отмены: Да Пузыри: Нет Возможность отмены: Нет Пузыри: Нет Возможность отмены: Нет Пузырьки: Нет Возможность отмены: Да Пузыри: Да Возможность отмены: Да Пузыри: Нет Возможность отмены: Нет Пузыри: Нет Возможность отмены: Нет tl; dr — Получите полную карту каждого события в браузере с помощью этого пакета npm. Посмотрите на результат запуска этого пакета в большом наборе браузеров и операционных систем в графическом представлении. События отличные. Мы, как разработчики JavaScript, постоянно используем их при создании и улучшении веб-сайтов и веб-приложений. Они являются неотъемлемой частью JavaScript и необходимы разработчику, желающему создать плавный и успешный UX любого типа.
И все же, когда дело доходит до событий в JavaScript, мы многого не знаем. В основном, это разнообразие — существует так много разных событий, которые могут быть прослушаны JavaScript, а мы, как разработчики, почти не осознаем их. Это знание заставило меня задуматься: «Почему для этого нет карты?»
Вы знаете, как карта каждого события каждого объекта в JavaScript, которое можно прослушать. Такая карта определенно поможет мне немного лучше понять мир событий JavaScript и, вероятно, узнать о многих событиях, с которыми я даже не знаком! Итак, эта мысль привела меня к вопросу «Как я могу получить эту информацию?»
Сначала я попытался найти его в Интернете. Мне не удалось найти такую карту — полную карту, в которой перечислены все объекты и все события, которые можно прослушивать под этими объектами (пожалуйста, поделитесь, если вы знаете такую карту!). Итак, что вы делаете, когда обнаруживаете, что есть какие-то знания, которых не хватает в Интернете? Вы помогите им! Я понял, что создание такой карты не должно быть слишком сложным, если вы понимаете, как работает подписка на события в JavaScript. Два основных метода подписки на события в JavaScript — это прослушиватели событий и обработчики событий.Давайте кратко рассмотрим эти два метода: Использование прослушивателей событий является мощным средством не только потому, что может быть зарегистрировано более одного, но и потому, что может быть предоставлена дополнительная конфигурация действия подписки на событие.
К сожалению, этот пост не об этом, и я не буду описывать эту часть прослушивателей событий, но это определенно то, что каждый разработчик JavaScript должен знать в совершенстве (я рекомендую вам прочитать об этом здесь). Когда дело доходит до объектов, которые не являются узлами DOM, есть один способ установить обработчик событий: Однако, когда дело доходит до объектов, которые являются узлами DOM, установка обработчика событий также может быть достигнута с помощью API атрибутов более высокого уровня: Помните, тот факт, что существует два способа зарегистрировать обработчик событий для объекта, не означает, что может быть более одного обработчика! API атрибутов просто лежит поверх API обработчика событий нижнего уровня: В конце концов, оба обработчика событий Этап 1. Извлечение всех поддерживаемых событий прототипа объекта Здесь все довольно просто.
Если обработчики событий являются свойствами объектов, то эти объекты должны содержать ссылку на эти обработчики в своих прототипах. Например, поскольку Круто! Теперь у нас есть две простые функции, которым мы можем предоставить прототип объекта и получить все поддерживаемые им события. Этап 2. Извлечение всех поддерживаемых событий всех прототипов объектов в браузере Теперь все, что осталось сделать, — это динамически извлечь поддерживаемые события всех объектов, которые существуют в браузере (все, что находится под окном Вот и все! Теперь вызов Здесь становится еще интереснее. Теперь, когда у нас есть возможность составить список всех событий в браузере, почему бы не создать инструмент, который извлекает эту информацию из каждого браузера во всех операционных системах и создает полную карту из извлеченных данных? Используя отличный продукт browserstack, я смог запустить функцию Проект можно найти на github, а также использовать как пакет npm. Надеюсь, эта статья и карта помогут пролить свет на разнообразие событий в JavaScript и помогут нам немного лучше понять и изучить их. Это исследование было проведено и опубликовано Галом Вейцманом от имени PerimeterX Inc. Я не на 100%, если это то, что вы ищете, но я думаю, что это то, что вы ищете. документ , как вы могли видеть, мы можем это сделать. просто обрежьте на в начале событий , который вернет что-то вроде: это просто кое-что, что я придумал, и я уверен, что есть лучшие ответы от более умных людей. click
не запускаются для элементов, которые обычно не являются интерактивными (например,
курсор
: указатель;
на элементе или на любом из его предков. onclick = "void (0)"
к элементу или любому из его предков, вплоть до
, но не включая его.
) вместо того, который обычно не является интерактивным (например,
щелкните
делегирование события.
(но он должен иметь href
)
(но он должен иметь href
) <кнопка>
<вход>
(но он должен быть связан с элементом управления формой)
. HTML
JavaScript
const button = document.querySelector ('button');
button.addEventListener ('клик', event => {
button.textContent = `Счетчик кликов: $ {event. detail}`;
});
Результат
События JavaScript
HTML-события
onclick
(с кодом) добавляется к
элемент: Пример
этот .innerHTML
): Пример
Общие события HTML
Событие
Описание
на замену
Изменен элемент HTML
onclick
Пользователь щелкает элемент HTML
на мышке над
Пользователь наводит указатель мыши на элемент HTML
onmouseout
Пользователь отводит указатель мыши от элемента HTML
нажатие клавиши
Пользователь нажимает клавишу на клавиатуре
загрузка
Браузер завершил загрузку страницы
Что умеет JavaScript?
Объект события HTML DOM
Событие
Описание
принадлежит
прервать
Событие возникает, когда загрузка носителя прервана
UiEvent, событие
послепечатка
Событие возникает, когда страница начала печать или если диалоговое окно печати было закрыто.
Событие
конец анимации
Событие происходит, когда анимация CSS завершена.
AnimationEvent
анимация
Событие происходит при повторении CSS-анимации
AnimationEvent
анимация старт
Событие происходит при запуске CSS-анимации
AnimationEvent
до печати
Событие происходит, когда страница собирается напечатать
Событие
перед выгрузкой
Событие происходит перед выгрузкой документа
UiEvent,
Событие
размытие
Событие происходит, когда элемент теряет фокус
FocusEvent
канплей
Событие возникает, когда браузер может начать воспроизведение мультимедиа (когда он буферизован
хватит для начала)
Событие
может пройти через
Событие возникает, когда браузер может воспроизводить мультимедиа без
остановка для буферизации
Событие
изменить
Событие возникает при изменении содержимого элемента формы, выбора или отмеченного состояния (для ,
Событие
нажмите
Событие происходит, когда пользователь нажимает на элемент
MouseEvent
контекстное меню
Событие возникает, когда пользователь щелкает правой кнопкой мыши элемент, чтобы открыть контекстное меню.
MouseEvent
копия
Событие возникает, когда пользователь копирует содержимое элемента
Буфер обмена Событие
разрез
Событие возникает, когда пользователь сокращает содержимое элемента
Буфер обмена Событие
dblclick
Событие возникает, когда пользователь дважды щелкает элемент
MouseEvent
перетяжка
Событие возникает при перетаскивании элемента
DragEvent
драгенд
Событие возникает, когда пользователь закончил перетаскивать элемент
DragEvent
Драгентер
Событие происходит, когда перетаскиваемый элемент попадает в цель перетаскивания
DragEvent
Драглев
Событие возникает, когда перетаскиваемый элемент покидает цель перетаскивания
DragEvent
драговер
Событие возникает, когда перетаскиваемый элемент находится над целью перетаскивания
DragEvent
драгстарт
Событие возникает, когда пользователь начинает перетаскивать элемент
DragEvent
падение
Событие происходит, когда перетаскиваемый элемент отбрасывается на цель перетаскивания
DragEvent
изменение длительности
Событие возникает при изменении длительности носителя
Событие
окончание
Событие происходит, когда носитель подошел к концу (полезно для сообщений типа «спасибо за прослушивание»).
Событие
ошибка
Событие возникает при возникновении ошибки при загрузке внешнего файла
ProgressEvent, г.
UiEvent, событие
фокус
Событие происходит, когда элемент получает фокус
FocusEvent
фокус в
Событие происходит, когда элемент собирается получить фокус
FocusEvent
фокус
Событие происходит, когда элемент собирается потерять фокус
FocusEvent
полноэкранный режим смены
Событие возникает, когда элемент отображается в полноэкранном режиме
Событие
полноэкранная ошибка
Событие возникает, когда элемент не может отображаться в полноэкранном режиме
Событие
хэш-обмен
Событие возникает, когда были внесены изменения в часть привязки URL-адреса
HashChangeEvent
вход
Событие происходит, когда элемент получает ввод пользователя
InputEvent,
Событие
недействительный
Событие возникает при недопустимом элементе
Событие
нажатие клавиши
Событие возникает, когда пользователь нажимает клавишу
KeyboardEvent
нажатие клавиши
Событие возникает при нажатии пользователем клавиши
KeyboardEvent
клавиатура
Событие происходит, когда пользователь отпускает клавишу
KeyboardEvent
нагрузка
Событие происходит при загрузке объекта
UiEvent,
Событие
загруженные данные
Событие происходит при загрузке медиа-данных
Событие
загруженные метаданные
Событие возникает при загрузке метаданных (например, размеров и продолжительности)
Событие
загрузка
Событие возникает, когда браузер начинает поиск указанного носителя.
ProgressEvent
сообщение
Событие возникает, когда сообщение получено через источник события
Событие
mousedown
Событие происходит, когда пользователь нажимает кнопку мыши над элементом
MouseEvent
mouseenter
Событие возникает, когда указатель перемещается на элемент
MouseEvent
мышиный лист
Событие возникает, когда указатель перемещается из элемента
MouseEvent
mousemove
Событие происходит, когда указатель перемещается, когда он находится над элементом
MouseEvent
при наведении курсора мыши
Событие происходит, когда указатель перемещается на элемент или на один из его дочерних элементов
MouseEvent
мышь
Событие возникает, когда пользователь перемещает указатель мыши за пределы элемента или одного из его дочерних элементов
MouseEvent
мышь
Событие происходит, когда пользователь отпускает кнопку мыши над элементом
MouseEvent
колесико мыши
Не рекомендуется. Использовать
событие колеса вместо
WheelEvent
не в сети
Событие возникает при переходе браузера в автономный режим
Событие
онлайн
Событие возникает, когда браузер начинает работать в сети
Событие
открытый
Событие возникает при открытии соединения с источником события
Событие
скрыть страницу
Событие происходит, когда пользователь уходит с веб-страницы
PageTransitionEvent
страниц показать
Событие происходит, когда пользователь переходит на веб-страницу
PageTransitionEvent
паста
Событие возникает, когда пользователь вставляет некоторый контент в элемент .
Буфер обмена Событие
пауза
Событие возникает, когда воспроизведение мультимедиа приостановлено пользователем или
программно
Событие
играть
Событие возникает, когда носитель был запущен или больше не приостановлен
Событие
играет
Событие возникает, когда медиа воспроизводится после приостановки или остановки для буферизации
Событие
popstate
Событие происходит при изменении истории окна
PopStateEvent
прогресс
Событие происходит, когда браузер находится в процессе получения медиафайлов.
данные (загрузка носителя)
Событие
курс
Событие происходит при изменении скорости воспроизведения носителя
Событие
изменить размер
Событие происходит при изменении размера представления документа
UiEvent,
Событие
сброс
Событие происходит при сбросе формы
Событие
свиток
Событие возникает при прокрутке полосы прокрутки элемента
UiEvent,
Событие
поиск
Событие возникает, когда пользователь что-то вводит в поле поиска (для )
Событие
разыскано
Событие происходит, когда пользователь заканчивает движение / переход к новой позиции.
в СМИ
Событие
ищу
Событие происходит, когда пользователь начинает движение / переход к новой позиции в
СМИ
Событие
выбрать
Событие происходит после того, как пользователь выбрал некоторый текст (для и
UiEvent,
Событие
показать
Событие происходит, когда элемент
Событие
остановлено
Событие возникает, когда браузер пытается получить данные мультимедиа, но данные недоступны
Событие
склад
Событие происходит при обновлении области веб-хранилища
StorageEvent
представить
Событие происходит при отправке формы
Событие
приостановить
Событие возникает, когда браузер намеренно не получает медиаданные
Событие
время обновления
Событие происходит, когда позиция воспроизведения изменилась (например, когда пользователь
перемотка вперед к другому месту в СМИ)
Событие
переключатель
Событие происходит, когда пользователь открывает или закрывает элемент
Событие
сенсорный отмена
Событие происходит при прерывании касания
TouchEvent
Тушенд
Событие происходит при удалении пальца с сенсорного экрана
TouchEvent
сенсорное перемещение
Событие возникает при перетаскивании пальца по экрану
TouchEvent
сенсорный запуск
Событие возникает, когда палец прикладывается к сенсорному экрану
TouchEvent
переходник
Событие происходит, когда переход CSS завершен.
TransitionEvent
разгружать
Событие возникает после выгрузки страницы (для )
UiEvent,
Событие
изменение объема
Событие происходит при изменении громкости носителя (включая настройку
громкость до «без звука»)
Событие
ожидание
Событие происходит, когда воспроизведение мультимедиа приостановлено, но ожидается, что оно возобновится (например,
когда медиа останавливается для буферизации большего количества данных)
Событие
колесо
Событие происходит, когда колесо мыши наматывается вверх или вниз над элементом
WheelEvent
Свойство / метод
Описание
принадлежит
altKey
Возвращает, была ли нажата клавиша «ALT» при срабатывании события мыши.
MouseEvent
altKey
Возвращает, была ли нажата клавиша «ALT» при срабатывании ключевого события
KeyboardEvent,
TouchEvent
animationName
Возвращает имя анимации
AnimationEvent
пузырей
Возвращает, является ли конкретное событие восходящим.
Событие
кнопка
Возвращает, какая кнопка мыши была нажата при срабатывании события мыши
MouseEvent
кнопки
Возвращает, какие кнопки мыши были нажаты при срабатывании события мыши
MouseEvent
с возможностью отмены
Возвращает, можно ли предотвратить действие по умолчанию для события
Событие
charCode
Возвращает код символа Unicode для клавиши, вызвавшей событие onkeypress
KeyboardEvent
изменить Касания
Возвращает список всех сенсорных объектов, состояние которых изменилось между
предыдущее касание и это касание
TouchEvent
клиент X
Возвращает горизонтальную координату указателя мыши относительно текущего окна, когда событие мыши было инициировано
MouseEvent,
TouchEvent
клиент
Возвращает вертикальную координату указателя мыши относительно текущего окна, когда событие мыши было инициировано
MouseEvent,
TouchEvent
буфер обмена Данные
Возвращает объект, содержащий данные, затронутые буфером обмена.
операция
Буфер обмена Данные
код
Возвращает код ключа, вызвавшего событие
KeyboardEvent
в составе
Возвращает, составлено событие или нет.
Событие
createEvent ()
Создает новое событие
Событие
ctrlKey
Возвращает, была ли нажата клавиша «CTRL» при срабатывании события мыши.
MouseEvent
ctrlKey
Возвращает, была ли нажата клавиша «CTRL» при срабатывании ключевого события.
KeyboardEvent,
TouchEvent
текущая цель
Возвращает элемент, слушатели событий которого инициировали событие
Событие
данные
Возвращает вставленные символы
InputEvent
передача данных
Возвращает объект, содержащий перетаскиваемые / отбрасываемые данные, или
вставлено / удалено
DragEvent, InputEvent
по умолчанию Предотвращено
Возвращает, был ли вызван метод preventDefault () для события .
Событие
deltaX
Возвращает величину горизонтальной прокрутки колеса мыши (ось x)
WheelEvent
deltaY
Возвращает величину вертикальной прокрутки колеса мыши (ось Y).
WheelEvent
deltaZ
Возвращает величину прокрутки колеса мыши для оси Z
WheelEvent
дельта Режим
Возвращает число, представляющее единицу измерения для значений дельты (пиксели, линии или страницы).
WheelEvent
деталь
Возвращает число, указывающее, сколько раз была нажата мышь
UiEvent
прошедшее время
Возвращает количество секунд, в течение которых выполнялась анимация.
AnimationEvent
прошедшее время
Возвращает количество секунд, в течение которых выполнялся переход.
этап события
Возвращает, какая фаза потока событий в настоящее время оценивается
Событие
getTargetRanges ()
Возвращает массив, содержащий целевые диапазоны, на которые будет влиять
вставка / удаление
InputEvent
getModifierState ()
Возвращает массив, содержащий целевые диапазоны, на которые будет влиять
вставка / удаление
MouseEvent
input Тип
Возвращает тип изменения (т.е.e «вставка» или «удаление»)
InputEvent
составляет
Возвращает, создается ли состояние события или нет.
InputEvent,
KeyboardEvent
доверено
Возвращает, является ли событие доверенным.
Событие
ключ
Возвращает значение ключа для ключа, представленного событием .
KeyboardEvent
ключ
Возвращает ключ измененного элемента хранилища
StorageEvent
ключ Код
Возвращает код символа Unicode для клавиши, вызвавшей событие onkeypress, или
Код клавиши Unicode для клавиши, вызвавшей нажатие клавиши или
событие onkeyup
KeyboardEvent
местонахождение
Возвращает расположение клавиши на клавиатуре или устройстве
KeyboardEvent
длина Вычисляемая
Возвращает, можно ли вычислить длину прогресса.
ProgressEvent
загружено
Возвращает количество загруженной работы
ProgressEvent
metaKey
Возвращает, была ли нажата клавиша «META» при срабатывании события
MouseEvent
metaKey
Возвращает, была ли нажата клавиша «мета» при срабатывании ключевого события.
KeyboardEvent,
TouchEvent
Механизм X
Возвращает горизонтальную координату указателя мыши относительно
позиция последнего события mousemove
MouseEvent
ДвижениеY
Возвращает вертикальную координату указателя мыши относительно
позиция последнего события mousemove
MouseEvent
новый Значение
Возвращает новое значение измененного элемента памяти
StorageEvent
новыйURL
Возвращает URL-адрес документа после изменения хэша.
HasChangeEvent
смещение X
Возвращает горизонтальную координату указателя мыши относительно
положение края целевого элемента
MouseEvent
смещение Y
Возвращает вертикальную координату указателя мыши относительно
положение края целевого элемента
MouseEvent
старое значение
Возвращает старое значение измененного элемента хранилища
StorageEvent
старыйURL
Возвращает URL-адрес документа до изменения хэша.
HasChangeEvent
без мусора
Событие возникает, когда происходит что-то плохое, и медиафайл внезапно
недоступен (например, неожиданно отключается)
стр X
Возвращает горизонтальную координату указателя мыши относительно документа, когда событие мыши было инициировано
MouseEvent
стр.
Возвращает вертикальную координату указателя мыши относительно документа, когда событие мыши было инициировано
MouseEvent
сохраняется
Возвращает, была ли веб-страница кэширована браузером.
PageTransitionEvent
preventDefault ()
Отменяет событие, если оно может быть отменено, что означает, что действие по умолчанию, относящееся к событию, не произойдет.
Событие
объект недвижимости
Возвращает имя свойства CSS, связанного с анимацией или переходом.
AnimationEvent,
TransitionEvent
псевдоэлемент
Возвращает имя псевдоэлемента анимации или перехода.
AnimationEvent,
TransitionEvent
регион
MouseEvent
relatedTarget
Возвращает элемент, связанный с элементом, который вызвал событие мыши
MouseEvent
relatedTarget
Возвращает элемент, связанный с элементом, вызвавшим событие
FocusEvent
повтор
Возвращает, удерживается ли клавиша повторно или нет
KeyboardEvent
экран X
Возвращает горизонтальную координату указателя мыши относительно экрана при срабатывании события
MouseEvent
экранY
Возвращает вертикальную координату указателя мыши относительно экрана при срабатывании события
MouseEvent
ShiftKey
Возвращает, была ли нажата клавиша «SHIFT» при возникновении события.
MouseEvent
shiftKey
Возвращает, была ли нажата клавиша «SHIFT» при срабатывании ключевого события.
KeyboardEvent,
TouchEvent
состояние
Возвращает объект, содержащий копию записей истории
PopStateEvent
stopImmediatePropagation ()
Предотвращает вызов других слушателей того же события
Событие
остановить распространение ()
Предотвращает дальнейшее распространение события во время потока событий
Событие
складская площадь
Возвращает объект, представляющий затронутый объект хранилища
StorageEvent
цель
Возвращает элемент, вызвавший событие
Событие
targetTouches
Возвращает список всех сенсорных объектов, которые контактируют с
поверхность и где событие touchstart произошло на том же целевом элементе, что и
текущий целевой элемент
TouchEvent
отметка времени
Возвращает время (в миллисекундах относительно эпохи), в которое было создано событие.
Событие
всего
Возвращает общий объем работы, которая будет загружена
ProgressEvent
касаний
Возвращает список всех сенсорных объектов, которые в данный момент находятся в контакте с
поверхность
TouchEvent
переходник
Событие происходит, когда переход CSS завершен.
TransitionEvent
тип
Возвращает название события
Событие
url
Возвращает URL-адрес документа измененного элемента.
StorageEvent
который
Возвращает, какая кнопка мыши была нажата при срабатывании события мыши
MouseEvent
который
Возвращает код символа Unicode для клавиши, вызвавшей событие onkeypress, или
Код клавиши Unicode для клавиши, вызвавшей нажатие клавиши или
событие onkeyup
KeyboardEvent
вид
Возвращает ссылку на объект Window, в котором произошло событие
UiEvent
События в JavaScript
отмена
onabort
Происходит, когда пользователь прерывает загрузку элемента img или input: image.
активировать
включить активировать
Происходит, когда элемент становится активным.
послепечатка
после печати
Происходит, когда браузер построил содержимое текущего документа для печати или для предварительного просмотра.
—
после обновления
Происходит для объекта с привязкой к данным после обновления данных в объекте источника данных.
перед активацией
до активации
Происходит до того, как элемент становится активным.
до копирования
перед копией
Происходит перед копированием выделения в буфер обмена и перед событием oncopy.
до распила
впереди
Происходит до того, как выделение будет вырезано из документа, и дает возможность включить пункт меню «Вырезать».
перед деактивировать
вкл прежде деактивировать
Происходит на активном элементе до того, как он потеряет активное состояние.
—
onbeforeeditfocus
Происходит до того, как элемент input: file, input: password, input: text или textarea или элемент в редактируемой области станет активированным пользовательским интерфейсом.
паста
onbeforepaste
Происходит до того, как содержимое буфера обмена будет вставлено в документ, и дает возможность включить пункт меню «Вставить».
до печати
перед печатью
Происходит, когда браузер начинает создавать содержимое текущего документа для печати или для предварительного просмотра.
перед выгрузкой
перед выгрузкой
Происходит до того, как браузер выгружает документ и предоставляет возможность отобразить диалоговое окно подтверждения, в котором пользователь может подтвердить, хочет ли он остаться или покинуть текущую страницу.
—
до обновления
Происходит в объекте привязки к данным до обновления данных в объекте источника данных.
размытие
onblur
Происходит, когда элемент теряет фокус.
отскок
на дребезге
Происходит, когда содержимое элемента выделения касается одной стороны ограничивающего прямоугольника элемента выделения.
—
однократная замена
Происходит в объекте источника данных при изменении данных в нем.
изменить
на замену
Происходит при изменении выделения, отмеченного состояния или содержимого элемента.В некоторых случаях это происходит только тогда, когда элемент теряет фокус.
CheckboxStateChange
—
Происходит при изменении состояния флажка.
нажмите
onclick
Происходит, когда пользователь щелкает элемент.
контекстное меню
контекстное меню
Происходит при нажатии правой кнопки мыши на элементе и отображении контекстного меню.
—
oncontrolselect
Происходит до выбора элемента управления в редактируемой области.
копия
копия
Происходит перед копированием выделения в буфер обмена.
разрез
нарезка
Происходит до того, как выделение будет вырезано из документа и добавлено в буфер обмена.
—
данные доступны
Происходит каждый раз, когда новый блок данных становится доступным из источника.
—
ondatasetchanged
Происходит в объекте источника данных, когда становится доступным исходный или новый набор данных.
—
ondatasetcomplete
Происходит для объекта источника данных, когда все его данные становятся доступными.
dblclick
ondblclick
Происходит, когда пользователь дважды щелкает элемент.
деактивировать
вкл. Деактивировать
Происходит на активном элементе, когда он теряет активное состояние.
ДОМ Активировать
—
Происходит, когда элемент становится активным.
DOMAttrModified
—
Срабатывает, когда атрибут добавляется, удаляется или когда значение атрибута изменяется скриптом.
DOMCharacterDataModified
—
Срабатывает, когда сценарий изменяет значение TextNode.
DOMFocusIn
—
Происходит до того, как элемент получит фокус.
DOMFocusOut
—
Происходит до того, как элемент теряет фокус.
DOMMouseScroll
—
Происходит при вращении колесика мыши.
DOMNodeInserted
—
Происходит на узле, когда он добавляется к элементу.
DOMNodeInsertedIntoDocument
—
Возникает на узле, когда он вставлен в документ.
DOMNodeRemoved
—
Происходит на узле, когда он удаляется из родительского.
DOMNodeRemovedFromDocument
—
Происходит на узле, когда он удаляется из документа.
DOMSubtreeModified
—
Срабатывает на узле, когда происходит изменение в принадлежащем ему поддереве.
перетяжка
ондраг
Периодически возникает на исходном элементе во время операции перетаскивания.
драгдроп
—
Происходит на возможном целевом элементе, когда на него перетаскиваются перетаскиваемые данные.
драгенд
ондрагенд
Происходит в исходном элементе, когда пользователь завершил операцию перетаскивания.
Драгентер
ондрагентер
Происходит в элементе, когда пользователь перемещает в него указатель мыши во время операции перетаскивания.
Драгексит
—
Происходит в элементе, когда пользователь перемещает указатель мыши из него во время операции перетаскивания.
перетаскивание
—
Происходит в исходном элементе, когда пользователь запускает операцию перетаскивания.
Драглев
ондраглейв
Происходит в элементе, когда пользователь перемещает указатель мыши из него во время операции перетаскивания.
драговер
ондраговер
Периодически возникает на элементе, когда указатель мыши находится над ним во время операции перетаскивания.
драгстарт
ондрагстарт
Происходит в исходном элементе, когда пользователь запускает операцию перетаскивания.
падение
капля
Происходит на возможном целевом элементе, когда на него перетаскиваются перетаскиваемые данные.
ошибка
ошибка
Срабатывает, когда возникает ошибка при загрузке внешнего файла.
ошибка (окно)
onerror (окно)
Срабатывает при возникновении ошибки сценария.
—
onerrorupdate
Происходит для объекта привязки к данным, когда он не может обновить данные в объекте источника данных.
—
на смену фильтров
Происходит после изменения фильтра или завершения перехода.
отделка
готово
Происходит, когда элемент выделения завершает анимацию прокрутки.
фокус
onfocus
Происходит, когда элемент получает фокус.
фокус в
onfocusin
Происходит до того, как элемент получит фокус.
фокус
onfocusout
Происходит после того, как элемент теряет фокус.
хэш-обмен
onhashchange
Происходит при изменении хеш-подраздела (начинается со знака «#») URL-адреса текущего документа.
справка
onhelp
Происходит после нажатия пользователем клавиши F1.
вход
на входе
Происходит при изменении текстового содержимого элемента через пользовательский интерфейс.
нажатие клавиши
onkeydown
Происходит для элемента, находящегося в фокусе, при нажатии клавиши и периодически до тех пор, пока клавиша не будет отпущена.
нажатие клавиши
onkeypress
Происходит для элемента, находящегося в фокусе, при нажатии клавиши и периодически до тех пор, пока клавиша не будет отпущена.
клавиатура
onkeyup
Происходит на элементе, находящемся в фокусе, когда пользователь отпускает клавишу.
нагрузка
загрузка
Происходит при загрузке объекта.
—
onlosecapture
Происходит, когда объект теряет захват мыши.
сообщение
в сообщении
Происходит, когда метод postMessage отправляет сообщение в текущее окно.
mousedown
onmousedown
Происходит, когда пользователь нажимает кнопку мыши над элементом.
mouseenter
onmouseenter
Происходит, когда пользователь перемещает указатель мыши в область элемента.
мышиный лист
onmouseleave
Происходит, когда пользователь перемещает указатель мыши за пределы элемента.
mousemove
onmousemove
Происходит, когда пользователь наводит указатель мыши на элемент.
мышь
onmouseout
Происходит, когда пользователь перемещает указатель мыши за пределы элемента.
при наведении курсора мыши
на мышке над
Происходит, когда пользователь перемещает указатель мыши в элемент.
мышь
onmouseup
Происходит, когда пользователь отпускает кнопку мыши над элементом.
колесико мыши
колесо мыши
Происходит при вращении колесика мыши.
—
onmove
Происходит при изменении положения левого верхнего угла элемента.
—
onmoveend
Происходит, когда пользователь прекращает перетаскивать элемент с абсолютным или относительным позиционированием в редактируемой области.
—
onmovestart
Происходит, когда пользователь начинает перетаскивать элемент с абсолютным или относительным позиционированием в редактируемой области.
не в сети
в сети
Происходит, когда браузер начинает работать в автономном режиме.
онлайн
онлайн
Происходит, когда браузер начинает работать в сети.
перелив
—
Происходит, когда содержимое или размер элемента изменяется и вызывает появление полосы прокрутки.
переполнено
—
Происходит, когда содержимое или размер элемента изменяется и вызывает появление или исчезновение полосы прокрутки.
паста
паста
Происходит до того, как содержимое буфера обмена будет вставлено в документ.
—
onpropertychange
Происходит каждый раз при изменении значения свойства элемента.
RadioStateChange
—
Происходит при изменении состояния переключателя.
готово к смене
onreadystatechange
Происходит при изменении состояния загрузки данных, принадлежащих элементу или документу HTML.
готовый обмен (XML-документ)
onreadystatechange (XML-документ)
Происходит при изменении состояния загрузки объекта XMLDocument.
состояние готовности к изменению (XMLHttpRequest)
onreadystatechange (XMLHttpRequest)
Происходит при изменении состояния запроса.
сброс
сброшено
Происходит в форме до ее сброса.
изменить размер
размер
Происходит при изменении размера объекта.
—
onresizeend
Происходит, когда пользователь прекращает изменять размер элемента в редактируемой области.
—
onresizestart
Происходит, когда пользователь начинает изменять размер элемента в редактируемой области.
—
onrowenter
Происходит в объекте источника данных при изменении текущей строки в нем.
—
onrowexit
Происходит в объекте источника данных до изменения текущей строки в нем.
—
onrowdelete
Происходит в объекте источника данных перед удалением строк.
—
вставлено
Происходит в объекте источника данных после вставки строк.
свиток
в прокрутке
Происходит при прокрутке содержимого элемента.
поиск
в поиске
Происходит, когда пользователь нажимает клавишу ENTER или щелкает кнопку «Стереть поисковый текст» (x) в поле ввода: поиска.
выбрать
при выборе
Происходит после выделения текста в элементе.
выбор изменить
на выбор, изменение
Происходит при изменении выделения в документе.
selectstart
onselectstart
Происходит в начале процесса выбора.
начало
на старте
Происходит, когда элемент marquee начинает анимацию прокрутки и когда начинается новый цикл.
остановка
остановка
Происходит, когда пользователь прерывает загрузку документа.
представить
onsubmit
Происходит в элементе формы, когда пользователь нажимает кнопку отправки в форме.
ввод текста
—
Происходит, когда в элемент вводятся некоторые символы.
нижний предел
—
Происходит, когда содержимое или размер элемента изменяется и вызывает исчезновение полосы прокрутки.
разгружать
под нагрузкой
Происходит до того, как браузер выгружает документ.
перечислить КАЖДОЕ событие, которое существует в браузере
События в JavaScript
Слушатели событий против. Обработчики событий
прослушиватели событий
: прослушиватели событий могут быть прикреплены к объектам и прослушивать их события. Это так просто. К событию можно прикрепить неограниченное количество слушателей:
window.addEventListener ("клик", событие => {
console.log (`первый слушатель:`, событие);
});
window. addEventListener ("клик", event => {
консоль.журнал (`второй слушатель:`, событие);
});
window.addEventListener ("клик", event => {
console.log (`третий слушатель:`, событие);
});
обработчики событий
: их можно использовать для регистрации тех же событий, что и прослушиватели событий, но другим и менее мощным способом. Обработчики событий — это фактические свойства прототипа объекта. Одновременно может быть только один обработчик событий для объекта и его события, и настройка обработчика событий, в отличие от прослушивателей событий, не является вариантом. Его настройка по умолчанию всегда будет аналогична эффекту вызова addEventListener
с false
в качестве третьего аргумента:
документ.addEventListener (
"НЕКОТОРЫЕ_СОБЫТИЕ",
event => {
console.log ("НЕКОТОРЫЙ_СЧЕТЧИК");
},
ложный
);
window.onclick = event => {
console.log («Этот обработчик НИКОГДА не будет вызван, так как он будет перезаписан»);
};
window.onclick = event => {
console.log («Этот обработчик - ЕДИНСТВЕННЫЙ обработчик, который будет выполняться при щелчке по окну», событие);
};
документ.body.setAttribute ("onclick", 'console.log ("нажата кнопка мыши", событие)');
document. body.onclick = event => {
console.log («нажали тело», событие);
};
document.body.setAttribute ("onclick", 'console.log ("нажата кнопка мыши:", событие)');
консоль.журнал (document.body.onclick);
и прослушиватели событий
регистрируют предоставленные обратные вызовы в один и тот же пул слушателей — между ними нет разницы, когда событие запускается! Как эти знания могут помочь с перечислением «КАЖДОГО события, которое существует в браузере»?
document.body
поддерживает событие click
, HTMLBodyElement
должен иметь свойство onclick
(независимо от того, является ли это его собственным свойством или нет).
Лучший способ получить все эти обработчики — перебрать прототип и найти их. Такие методы, как Object.keys ()
или Object.getOwnPropertyNames ()
, не помогут, если наша цель — получить ВСЕ свойства объекта, а не только его собственные свойства.
Теперь то, что вам нужно искать в итерации, — это свойства, которые начинаются с на
.Эти свойства по определению ссылаются на обработчики событий. Это должно выглядеть примерно так:
function _isEvent (prop) {
if (0! == prop.indexOf ("on")) {
вернуть ложь;
}
вернуть истину;
}
function _getEvents (obj) {
var result = [];
for (var prop in obj) {
if (_isEvent (prop)) {
prop = prop.substr (2);
result.push (опора);
}
}
вернуть результат;
}
console. log (_getEvents (XMLHttpRequest.prototype));
), используя вспомогательные функции, которые мы только что реализовали выше.
Это означает, что сначала нам нужно запустить _getEvents
в самом окне
, чтобы получить все поддерживаемые им события.
Затем нам нужно будет перебрать все собственные свойства окна
и получить все события, поддерживаемые этими свойствами (например,грамм. XMLHttpRequest
является свойством окна
, поэтому нам также необходимо получить поддерживаемые им события).
function getEvents () {
const result = {};
результат ["окно"] = _getEvents (окно, hasOwnProperty);
const arr = Object.getOwnPropertyNames (окно);
for (let i = 0; i
getEvents ()
даст нам все события в браузере! И поскольку мы говорим о ОЧЕНЬ МНОГО событий, я не буду здесь документировать их все, но вы можете сами увидеть результат прямо здесь: jsfiddle / github gist. А как насчет КАЖДОГО события, которое существует в КАЖДОМ браузере?
getEvents ()
на очень большом количестве браузеров и операционных систем, извлечь эти данные и представить их в графическом виде. Это представление можно найти прямо здесь, а весь список событий можно найти здесь.
В последний раз я запускал код извлечения, когда Chrome 75 был последней версией, поэтому этот список может быть не полностью актуальным. Кроме того, этот список никоим образом не является исчерпывающим (например, в нем отсутствуют мобильные устройства), и я оставляю вам право прислать нам дополнительные устройства и браузеры, с которыми вы столкнетесь. Приглашаем вас помочь поддерживать этот список в актуальном состоянии!
oop - Как добавить прослушиватель событий для всех событий в javascript, не перечисляя их по отдельности?
, который мы обычно добавляем для наших событий, не содержит событий. На самом деле это класс бабушек и дедушек.
документ -> HTMLDocument -> Document (где вы можете найти события onclick *)
Object.keys (document .__ proto __.__ proto __). Reduce ((arr, event) => {
если (event.startsWith ('on')) return [...arr, event.substr (2)];
возврат обр;
}, [])
[«readystatechange», «pointerlockchange», «pointerlockerror», «beforecopy», «beforecut», «beforepaste», «freeze», «возобновить», «search», «securitypolicyviolation», «visibilitychange», «copy» , «вырезать», «вставить», «прервать», «размыть», «отменить», «canplay», «canplaythrough», «изменить», «щелкнуть», «закрыть», «contextmenu», «cuechange», « dblclick »,« drag »,« dragend »,« dragenter »,« dragleave »,« dragover »,« dragstart »,« drop »,« durationchange »,« emptied »,« окончено »,« error »,« focus » , "formdata", "input", "invalid", "keydown", "keypress", "keyup", "load", "loadeddata", "loadedmetadata", "loadstart", "mousedown", "mouseenter", " mouseleave "," mousemove "," mouseout "," mouseover "," mouseup "," mousewheel "," pause "," play "," play "," progress "," ratechange "," reset "," resize " , "прокрутка", "поиск", "поиск", "выбор", "остановка", "отправка", "приостановка", "обновление по времени", "переключение", "изменение объема", "ожидание", "webkitanimationend", " webkitanimationiteration »,« webkitanimationstart »,« webkittransitionend »,« колесо », «auxclick», «gotpointercapture», «lostpointercapture», «pointerdown», «pointermove», «pointerup», «pointercancel», «pointerover», «pointerout», «pointerenter», «pointerleave», «selectstart», «selectionchange» "," animationend "," animationiteration "," animationstart "," transitionend "," fullscreenchange "," fullscreenerror "," webkitfullscreenchange "," webkitfullscreenerror "," pointerrawupdate "]