HTML DOM Events
HTML DOM Events
HTML DOM events allow JavaScript to register different event handlers on elements in an HTML document.
Events are normally used in combination with functions, and the function will not be executed before the event occurs (such as when a user clicks a button).
Tip: The event model was standardized by the W3C in DOM Level 2.
HTML DOM Events
DOM: Indicates in which DOM Level the property was introduced.
Standard Events
| Event Name | Description | Event Type | Category | Specification |
|---|---|---|---|---|
| abort | The loading of a resource has been aborted. | UIEvent | DOM L3 | |
| abort | Progression has been terminated (not due to an error). | ProgressEvent | Progress and XMLHttpRequest | |
| abort | A transaction has been aborted. | Event | IndexedDB | |
| afterprint | The associated document has started printing or the print preview has been closed. | Event | HTML5 | |
| animationend | A CSS animation has completed. | AnimationEvent | CSS Animations | |
| animationiteration | A CSS animation is repeated. | AnimationEvent | CSS Animations | |
| animationstart | A CSS animation has started. | AnimationEvent | CSS Animations | |
| appinstalled | A web application is successfully installed as a progressive web app. | Event | Web App Manifest | |
| audioprocess | The input buffer of a ScriptProcessorNode is ready to be processed. | AudioProcessingEvent | Web Audio API | |
| audioend | The user agent has finished capturing audio for speech recognition. | Event | Web Speech API | |
| audiostart | The user agent has started to capture audio for speech recognition. | Event | Web Speech API | |
| beforeprint | The associated document is about to be printed or previewed for printing. | Event | HTML5 | |
| beforeunload | The window, the document and its resources are about to be unloaded. | BeforeUnloadEvent | HTML5 | |
| beginEvent | A SMIL animation element begins. | TimeEvent | SVG | |
| blocked | An open connection to a database is blocking a versionchange transaction on the same database. | IndexedDB | ||
| blur | An element has lost focus (does not bubble). | FocusEvent | DOM L3 | |
| boundary | The spoken utterance reaches a word or sentence boundary | SpeechSynthesisEvent | Web Speech API | |
| cached | The resources listed in the manifest have been downloaded, and the application is now cached. | Event | Offline | |
| canplay | 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. | Event | HTML5 media | |
| canplaythrough | The user agent can play the media up to its end without having to stop for further buffering of content. | Event | HTML5 media | |
| change | The change event is fired for input, select, and textarea elements when a change to the element's value is committed by the user. | Event | DOM L2, HTML5 | |
| chargingchange | The battery begins or stops charging. | Event | Battery status | |
| chargingtimechange | The chargingTime attribute has been updated. | Event | Battery status | |
| checking | The user agent is checking for an update, or attempting to download the cache manifest for the first time. | Event | Offline | |
| click | A pointing device button has been pressed and released on an element. | MouseEvent | DOM L3 | |
| close | A WebSocket connection has been closed. | Event | WebSocket | |
| complete | A transaction successfully completed. | IndexedDB | ||
| complete | The rendering of an OfflineAudioContext is terminated. | OfflineAudioCompletionEvent | Web Audio API | |
| compositionend | The composition of a passage of text has been completed or canceled. | CompositionEvent | DOM L3 | |
| compositionstart | 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). | CompositionEvent | DOM L3 | |
| compositionupdate | A character is added to a passage of text being composed. | CompositionEvent | DOM L3 | |
| contextmenu | The right button of the mouse is clicked (before the context menu is displayed). | MouseEvent | HTML5 | |
| copy | The text selection has been added to the clipboard. | ClipboardEvent | Clipboard | |
| cut | The text selection has been removed from the document and added to the clipboard. | ClipboardEvent | Clipboard | |
| dblclick | A pointing device button is clicked twice on an element. | MouseEvent | DOM L3 | |
| devicechange | A media device such as a camera, microphone, or speaker is connected or removed from the system. | Event | Media Capture and Streams | |
| devicelight | Fresh data is available from a light sensor. | DeviceLightEvent | Ambient Light Events | |
| devicemotion | Fresh data is available from a motion sensor. | DeviceMotionEvent | Device Orientation Events | |
| deviceorientation | Fresh data is available from an orientation sensor. | DeviceOrientationEvent | Device Orientation Events | |
| deviceproximity | Fresh data is available from a proximity sensor (indicates an approximated distance between the device and a nearby object). | DeviceProximityEvent | Proximity Events | |
| dischargingtimechange | The dischargingTime attribute has been updated. | Event | Battery status | |
| DOMActivate | A button, link or state changing element is activated (use click instead). | UIEvent | DOM L3 | |
| DOMAttributeNameChanged | The name of an attribute changed (use mutation observers instead). | MutationNameEvent | DOM L3 Removed | |
| DOMAttrModified | The value of an attribute has been modified (use mutation observers instead). | MutationEvent | DOM L3 | |
| DOMCharacterDataModified | A text or another CharacterData has changed (use mutation observers instead). | MutationEvent | DOM L3 | |
| DOMContentLoaded | The document has finished loading (but not its dependent resources). | Event | HTML5 | |
| DOMElementNameChanged | The name of an element changed (use mutation observers instead). | MutationNameEvent | DOM L3 Removed | |
| DOMFocusIn Unimplemented | An element has received focus (use focus or focusin instead). | FocusEvent | DOM L3 | |
| DOMFocusOut Unimplemented | An element has lost focus (use blur or focusout instead). | FocusEvent | DOM L3 | |
| DOMNodeInserted | A node has been added as a child of another node (use mutation observers instead). | MutationEvent | DOM L3 | |
| DOMNodeInsertedIntoDocument | A node has been inserted into the document (use mutation observers instead). | MutationEvent | DOM L3 | |
| DOMNodeRemoved | A node has been removed from its parent node (use mutation observers instead). | MutationEvent | DOM L3 | |
| DOMNodeRemovedFromDocument | A node has been removed from the document (use mutation observers instead). | MutationEvent | DOM L3 | |
| DOMSubtreeModified | A change happened in the document (use mutation observers instead). | MutationEvent | DOM L3 | |
| downloading | The user agent has found an update and is fetching it, or is downloading the resources listed by the cache manifest for the first time. | Event | Offline | |
| drag | An element or text selection is being dragged (every 350ms). | DragEvent | HTML5 | |
| dragend | A drag operation is being ended (by releasing a mouse button or hitting the escape key). | DragEvent | HTML5 | |
| dragenter | A dragged element or text selection enters a valid drop target. | DragEvent | HTML5 | |
| dragleave | A dragged element or text selection leaves a valid drop target. | DragEvent | HTML5 | |
| dragover | An element or text selection is being dragged over a valid drop target (every 350ms). | DragEvent | HTML5 | |
| dragstart | The user starts dragging an element or text selection. | DragEvent | HTML5 | |
| drop | An element is dropped on a valid drop target. | DragEvent | HTML5 | |
| durationchange | The duration attribute has been updated. | Event | HTML5 media | |
| emptied | 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. | Event | HTML5 media | |
| end | The speech recognition service has disconnected. | Event | Web Speech API | |
| end | The utterance has finished being spoken. | SpeechSynthesisEvent | Web Speech API | |
| ended | Playback has stopped because the end of the media was reached. | Event | HTML5 media | |
| ended | Playback has stopped because the end of the media was reached. | Event | Web Audio API | |
| endEvent | A SMIL animation element ends. | TimeEvent | SVG | |
| error | A resource failed to load. | UIEvent | DOM L3 | |
| error | Progression has failed. | ProgressEvent | Progress and XMLHttpRequest | |
| error | An error occurred while downloading the cache manifest or updating the content of the application. | Event | Offline | |
| error | A WebSocket connection has been closed with prejudice (some data couldn't be sent for example). | Event | WebSocket | |
| error | An event source connection has been failed. | Event | Server Sent Events | |
| error | A request caused an error and failed. | Event | IndexedDB | |
| error | A speech recognition error occurs. | Event | Web Speech API | |
| error | An error occurs that prevents the utterance from being successfully spoken. | SpeechSynthesisErrorEvent | Web Speech API | |
| focus | An element has received focus (does not bubble). | FocusEvent | DOM L3 | |
| focusin | An element is about to receive focus (bubbles). | FocusEvent | DOM L3 | |
| focusout | An element is about to lose focus (bubbles). | FocusEvent | DOM L3 | |
| fullscreenchange | An element was turned to fullscreen mode or back to normal mode. | Event | Full Screen | |
| fullscreenerror | It was impossible to switch to fullscreen mode for technical reasons or because the permission was denied. | Event | Full Screen | |
| gamepadconnected | A gamepad has been connected. | GamepadEvent | Gamepad | |
| gamepaddisconnected | A gamepad has been disconnected. | GamepadEvent | Gamepad | |
| gotpointercapture | Element receives pointer capture. | PointerEvent | Pointer Events | |
| hashchange | The fragment identifier of the URL has changed (the part of the URL after the #). | HashChangeEvent | HTML5 | |
| lostpointercapture | Element lost pointer capture. | PointerEvent | Pointer Events | |
| input | The value of an element changes or the content of an element with the attribute contenteditable is modified. | Event | HTML5 | |
| invalid | A submittable element has been checked and doesn't satisfy its constraints. | Event | HTML5 | |
| keydown | A key is pressed down. | KeyboardEvent | DOM L3 | |
| keypress | A key is pressed down and that key normally produces a character value (use input instead). | KeyboardEvent | DOM L3 | |
| keyup | A key is released. | KeyboardEvent | DOM L3 | |
| languagechange | The user's preferred languages have changed. | Event | HTML 5.1 | |
| levelchange | The level attribute has been updated. | Event | Battery status | |
| load | A resource and its dependent resources have finished loading. | UIEvent | DOM L3 | |
| load | Progression has been successful. | ProgressEvent | Progress and XMLHttpRequest | |
| loadeddata | The first frame of the media has finished loading. | Event | HTML5 media | |
| loadedmetadata | The metadata has been loaded. | Event | HTML5 media | |
| loadend | Progress has stopped (after "error", "abort" or "load" have been dispatched). | ProgressEvent | Progress and XMLHttpRequest | |
| loadstart | Progress has begun. | ProgressEvent | Progress and XMLHttpRequest | |
| mark | The spoken utterance reaches a named SSML "mark" tag. | SpeechSynthesisEvent | Web Speech API | |
| message | A message is received through a WebSocket. | MessageEvent | WebSocket | |
| message | A message is received from a Web Worker. | MessageEvent | Web Workers | |
| message | A message is received from a child (i)frame or a parent window. | MessageEvent | Web Messaging | |
| message | A message is received through an event source. | MessageEvent | Server Sent Events | |
| messageerror | A message error is raised when a message is received by an object. | MessageEvent | MessagePort, Web Workers, Broadcast Channel, Window | |
| message | A message is received from a service worker, or a message is received in a service worker from another context. | ServiceWorkerMessageEvent or ExtendableMessageEvent, depending on context. | Service Workers | |
| mousedown | A pointing device button (usually a mouse) is pressed on an element. | MouseEvent | DOM L3 | |
| mouseenter | A pointing device is moved onto the element that has the listener attached. | MouseEvent | DOM L3 | |
| mouseleave | A pointing device is moved off the element that has the listener attached. | MouseEvent | DOM L3 | |
| mousemove | A pointing device is moved over an element. | MouseEvent | DOM L3 | |
| mouseout | A pointing device is moved off the element that has the listener attached or off one of its children. | MouseEvent | DOM L3 | |
| mouseover | A pointing device is moved onto the element that has the listener attached or onto one of its children. | MouseEvent | DOM L3 | |
| mouseup | A pointing device button is released over an element. | MouseEvent | DOM L3 | |
| nomatch | The speech recognition service returns a final result with no significant recognition. | SpeechRecognitionEvent | Web Speech API | |
| notificationclick | A system notification spawned by ServiceWorkerRegistration.showNotification() has been clicked. | NotificationEvent | Notifications API | |
| noupdate | The manifest hadn't changed. | Event | Offline | |
| obsolete | The manifest was found to have become a 404 or 410 page, so the application cache is being deleted. | Event | Offline | |
| offline | The browser has lost access to the network. | Event | HTML5 offline | |
| online | The browser has gained access to the network (but particular websites might be unreachable). | Event | HTML5 offline | |
| open | A WebSocket connection has been established. | Event | WebSocket | |
| open | An event source connection has been established. | Event | Server Sent Events | |
| orientationchange | The orientation of the device (portrait/landscape) has changed | Event | Screen Orientation | |
| pagehide | A session history entry is being traversed from. | PageTransitionEvent | HTML5 | |
| pageshow | A session history entry is being traversed to. | PageTransitionEvent | HTML5 | |
| paste | Data has been transferred from the system clipboard to the document. | ClipboardEvent | Clipboard | |
| pause | Playback has been paused. | Event | HTML5 media | |
| pause | The utterance is paused part way through. | SpeechSynthesisEvent | Web Speech API | |
| pointercancel | The pointer is unlikely to produce any more events. | PointerEvent | Pointer Events | |
| pointerdown | The pointer enters the active buttons state. | PointerEvent | Pointer Events | |
| pointerenter | Pointing device is moved inside the hit-testing boundary. | PointerEvent | Pointer Events | |
| pointerleave | Pointing device is moved out of the hit-testing boundary. | PointerEvent | Pointer Events | |
| pointerlockchange | The pointer was locked or released. | Event | Pointer Lock | |
| pointerlockerror | It was impossible to lock the pointer for technical reasons or because the permission was denied. | Event | Pointer Lock | |
| pointermove | The pointer changed coordinates. | PointerEvent | Pointer Events | |
| pointerout | The pointing device moved out of hit-testing boundary or leaves detectable hover range. | PointerEvent | Pointer Events | |
| pointerover | The pointing device is moved into the hit-testing boundary. | PointerEvent | Pointer Events | |
| pointerup | The pointer leaves the active buttons state. | PointerEvent | Pointer Events | |
| play | Playback has begun. | Event | HTML5 media | |
| playing | Playback is ready to start after having been paused or delayed due to lack of data. | Event | HTML5 media | |
| popstate | A session history entry is being navigated to (in certain cases). | PopStateEvent | HTML5 | |
| progress | In progress. | ProgressEvent | Progress and XMLHttpRequest | |
| progress | The user agent is downloading resources listed by the manifest. | ProgressEvent | Offline | |
| push | A Service Worker has received a push message. | PushEvent | Push API | |
| pushsubscriptionchange | A PushSubscription has expired. | PushEvent | Push API | |
| ratechange | The playback rate has changed. | Event | HTML5 media | |
| readystatechange | The readyState attribute of a document has changed. | Event | HTML5 and XMLHttpRequest | |
| repeatEvent | A SMIL animation element is repeated. | TimeEvent | SVG | |
| reset | A form is reset. | Event | DOM L2, HTML5 | |
| resize | The document view has been resized. | UIEvent | DOM L3 | |
| resourcetimingbufferfull | The browser's resource timing buffer is full. | Performance | Resource Timing | |
| result | The speech recognition service returns a result � a word or phrase has been positively recognized and this has been communicated back to the app. | SpeechRecognitionEvent | Web Speech API | |
| resume | A paused utterance is resumed. | SpeechSynthesisEvent | Web Speech API | |
| scroll | The document view or an element has been scrolled. | UIEvent | DOM L3 | |
| seeked | A seek operation completed. | Event | HTML5 media | |
| seeking | A seek operation began. | Event | HTML5 media | |
| select | Some text is being selected. | UIEvent | DOM L3 | |
| selectstart | A selection just started. | Event | Selection API | |
| selectionchange | The selection in the document has been changed. | Event | Selection API | |
| show | A contextmenu event was fired on/bubbled to an element that has a contextmenu attribute | MouseEvent | HTML5 | |
| soundend | Any sound � recognisable speech or not � has stopped being detected. | Event | Web Speech API | |
| soundstart | Any sound � recognisable speech or not � has been detected. | Event | Web Speech API | |
| speechend | Speech recognised by the speech recognition service has stopped being detected. | Event | Web Speech API | |
| speechstart | Sound that is recognised by the speech recognition service as speech has been detected. | Event | Web Speech API | |
| stalled | The user agent is trying to fetch media data, but data is unexpectedly not forthcoming. | Event | HTML5 media | |
| start | The speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current SpeechRecognition. | Event | Web Speech API | |
| start | The utterance has begun to be spoken. | SpeechSynthesisEvent | Web Speech API | |
| storage | A storage area (localStorage or sessionStorage) has changed. | StorageEvent | Web Storage | |
| submit | A form is submitted. | Event | DOM L2, HTML5 | |
| success | A request successfully completed. | Event | IndexedDB | |
| suspend | Media data loading has been suspended. | Event | HTML5 media | |
| SVGAbort | Page loading has been stopped before the SVG was loaded. | SVGEvent | SVG | |
| SVGError | An error has occurred before the SVG was loaded. | SVGEvent | SVG | |
| SVGLoad | An SVG document has been loaded and parsed. | SVGEvent | SVG | |
| SVGResize | An SVG document is being resized. | SVGEvent | SVG | |
| SVGScroll | An SVG document is being scrolled. | SVGEvent | SVG | |
| SVGUnload | An SVG document has been removed from a window or frame. | SVGEvent | SVG | |
| SVGZoom | An SVG document is being zoomed. | SVGZoomEvent | SVG | |
| timeout | XMLHttpRequest | ProgressEvent | ||
| timeupdate | The time indicated by the currentTime attribute has been updated. | Event | HTML5 media | |
| touchcancel | A touch point has been disrupted in an implementation-specific manners (too many touch points for example). | TouchEvent | Touch Events | |
| touchend | A touch point is removed from the touch surface. | TouchEvent | Touch Events | |
| touchmove | A touch point is moved along the touch surface. | TouchEvent | Touch Events | |
| touchstart | A touch point is placed on the touch surface. | TouchEvent | Touch Events | |
| transitionend | A CSS transition has completed. | TransitionEvent | CSS Transitions | |
| unload | The document or a dependent resource is being unloaded. | UIEvent | DOM L3 | |
| updateready | The resources listed in the manifest have been newly redownloaded, and the script can use swapCache() to switch to the new cache. | Event | Offline | |
| upgradeneeded | An attempt was made to open a database with a version number higher than its current version. A versionchange transaction has been created. | IndexedDB | ||
| userproximity | Fresh data is available from a proximity sensor (indicates whether the nearby object is near the device or not). | UserProximityEvent | Proximity Events | |
| voiceschanged | The list of SpeechSynthesisVoice objects that would be returned by the SpeechSynthesis.getVoices() method has changed (when the voiceschanged event fires.) | Event | Web Speech API | |
| versionchange | A versionchange transaction completed. | IndexedDB | ||
| visibilitychange | The content of a tab has become visible or has been hidden. | Event | Page visibility | |
| volumechange | The volume has changed. | Event | HTML5 media | |
| waiting | Playback has stopped because of a temporary lack of data. | Event | HTML5 media | |
| wheel | A wheel button of a pointing device is rotated in any direction. | WheelEvent | DOM L3 |
