W3cubDocs

/DOM Events

DOM Events

DOM Events are sent to notify code of interesting things that have taken place. Each event is represented by an object which is based on the Event interface, and may have additional custom fields and/or functions used to get additional information about what happened. Events can represent everything from basic user interactions to automated notifications of things happening in the rendering model.

This article offers a list of events that can be sent; some are standard events defined in official specifications, while others are events used internally by specific browsers; for example, Mozilla-specific events are listed so that add-ons can use them to interact with the browser.

Most Common Categories

Resource Events
Event Name Fired When
cached The resources listed in the manifest have been downloaded, and the application is now cached.
error A resource failed to load.
abort The loading of a resource has been aborted.
load A resource and its dependent resources have finished loading.
beforeunload The window, the document and its resources are about to be unloaded.
unload The document or a dependent resource is being unloaded.
Network Events
Event Name Fired When
online The browser has gained access to the network.
offline The browser has lost access to the network.
Focus Events
Event Name Fired When
focus An element has received focus (does not bubble).
blur An element has lost focus (does not bubble).
Websocket Events
Event Name Fired When
open A WebSocket connection has been established.
message A message is received through a WebSocket.
error A WebSocket connection has been closed with prejudice (some data couldn't be sent for example).
close A WebSocket connection has been closed.
Session History Events
Event Name Fired When
pagehide A session history entry is being traversed from.
pageshow A session history entry is being traversed to.
popstate A session history entry is being navigated to (in certain cases).
CSS Animation Events
Event Name Fired When
animationstart A CSS animation has started.
animationend A CSS animation has completed.
animationiteration A CSS animation is repeated.
Form Events
Event Name Fired When
reset The reset button is pressed
submit The submit button is pressed
Printing Events
Event Name Fired When
beforeprint The print dialog is opened
afterprint The print dialog is closed
Text Composition Events
Event Name Fired When
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).
compositionupdate A character is added to a passage of text being composed.
compositionend The composition of a passage of text has been completed or canceled.
View Events
Event Name Fired When
fullscreenchange An element was turned to fullscreen mode or back to normal mode.
fullscreenerror It was impossible to switch to fullscreen mode for technical reasons or because the permission was denied.
resize The document view has been resized.
scroll The document view or an element has been scrolled.
Clipboard Events
Event Name Fired When
cut The selection has been cut and copied to the clipboard
copy The selection has been copied to the clipboard
paste The item from the clipboard has been pasted
Keyboard Events
Event Name Fired When
keydown ANY key is pressed
keypress ANY key except Shift, Fn, CapsLock is in pressed position. (Fired continously.)
keyup ANY key is released
Mouse Events
Event Name Fired When
mouseenter A pointing device is moved onto the element that has the listener attached.
mouseover A pointing device is moved onto the element that has the listener attached or onto one of its children.
mousemove A pointing device is moved over an element. (Fired continously as the mouse moves.)
mousedown A pointing device button (ANY button) is pressed on an element.
mouseup A pointing device button (ANY button) is released over an element.
click A pointing device button (ANY button) has been pressed and released on an element.
dblclick A pointing device button is clicked twice on an element.
contextmenu The right button of the mouse is clicked (before the context menu is displayed).
wheel A wheel button of a pointing device is rotated in any direction.
mouseleave A pointing device is moved off the element that has the listener attached.
mouseout A pointing device is moved off the element that has the listener attached or off one of its children.
select Some text is being selected.
pointerlockchange The pointer was locked or released.
pointerlockerror It was impossible to lock the pointer for technical reasons or because the permission was denied.
Drag & Drop Events
Event Name Fired When
dragstart The user starts dragging an element or text selection.
drag An element or text selection is being dragged (Fired continuously every 350ms).
dragend A drag operation is being ended (by releasing a mouse button or hitting the escape key).
dragenter A dragged element or text selection enters a valid drop target.
dragover An element or text selection is being dragged over a valid drop target. (Fired continuously every 350ms.)
dragleave A dragged element or text selection leaves a valid drop target.
drop An element is dropped on a valid drop target.
Media Events
Event Name Fired When
durationchange The duration attribute has been updated.
loadedmetadata The metadata has been loaded.
loadeddata The first frame of the media has finished loading.
canplay The browser 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 The browser estimates it can play the media up to its end without stopping for content buffering.
ended Playback has stopped because the end of the media was reached.
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.
stalled The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
suspend Media data loading has been suspended.
play Playback has begun.
playing Playback is ready to start after having been paused or delayed due to lack of data.
pause Playback has been paused.
waiting Playback has stopped because of a temporary lack of data.
seeking A seek operation began.
seeked A seek operation completed.
ratechange The playback rate has changed.
timeupdate The time indicated by the currentTime attribute has been updated.
volumechange The volume has changed.
complete The rendering of an OfflineAudioContext is terminated.
ended Playback has stopped because the end of the media was reached.
audioprocess The input buffer of a ScriptProcessorNode is ready to be processed.
Progress Events
Event Name Fired When
loadstart Progress has begun.
progress In progress.
error Progression has failed.
timeout Progression is terminated due to preset time expiring.
abort Progression has been terminated (not due to an error).
load Progression has been successful.
loadend Progress has stopped (after "error", "abort" or "load" have been dispatched).

Storage events

change (see Non-standard events)
storage

Update events

checking
downloading
error
noupdate
obsolete
updateready

Value change events

broadcast
CheckboxStateChange
hashchange
input
RadioStateChange
readystatechange
ValueChange

Uncategorized events

invalid
localized
message
message
message
open
show

Less Common and NonStandard Categories

SVG events

SVGAbort
SVGError
SVGLoad
SVGResize
SVGScroll
SVGUnload
SVGZoom

Database events

abort
blocked
complete
error (link)
success
upgradeneeded
versionchange

Notification events

AlertActive
AlertClose

CSS events

CssRuleViewRefreshed
CssRuleViewChanged
CssRuleViewCSSLinkClicked
transitionend

Script events

afterscriptexecute
beforescriptexecute

DOMMenuItemActive
DOMMenuItemInactive

Window events

DOMWindowCreated
DOMTitleChanged
DOMWindowClose
SSWindowClosing
SSWindowStateReady
SSWindowStateBusy
close

Document events

DOMLinkAdded
DOMLinkRemoved
DOMMetaAdded
DOMMetaRemoved
DOMWillOpenModalDialog
DOMModalDialogClosed

popuphidden
popuphiding
popupshowing
popupshown
DOMPopupBlocked

Tab events

TabOpen
TabClose
TabSelect
TabShow
TabHide
TabPinned
TabUnpinned
SSTabClosing
SSTabRestoring
SSTabRestored
visibilitychange

Battery events

chargingchange
chargingtimechange
dischargingtimechange
levelchange

Call events

alerting
busy
callschanged
cfstatechange
connected
connecting
dialing
disconnected
disconnecting
error
held, holding
incoming
resuming
statechange
voicechange

Sensor events

compassneedscalibration
devicelight
devicemotion
deviceorientation
deviceproximity
MozOrientation
orientationchange
userproximity

Smartcard events

icccardlockerror
iccinfochange
smartcard-insert
smartcard-remove
stkcommand
stksessionend
cardstatechange

SMS and USSD events

delivered
received
sent
ussdreceived

Frame events

mozbrowserclose
mozbrowsercontextmenu
mozbrowsererror
mozbrowsericonchange
mozbrowserlocationchange
mozbrowserloadend
mozbrowserloadstart
mozbrowseropenwindow
mozbrowsersecuritychange
mozbrowsershowmodalprompt (link)
mozbrowsertitlechange
DOMFrameContentLoaded

DOM mutation events

DOMAttributeNameChanged
DOMAttrModified
DOMCharacterDataModified
DOMContentLoaded
DOMElementNameChanged
DOMNodeInserted
DOMNodeInsertedIntoDocument
DOMNodeRemoved
DOMNodeRemovedFromDocument
DOMSubtreeModified

Touch events

MozEdgeUIGesture
MozMagnifyGesture
MozMagnifyGestureStart
MozMagnifyGestureUpdate
MozPressTapGesture
MozRotateGesture
MozRotateGestureStart
MozRotateGestureUpdate
MozSwipeGesture
MozTapGesture
MozTouchDown
MozTouchMove
MozTouchUp
touchcancel
touchend
touchenter
touchleave
touchmove
touchstart

Pointer events

pointerover
pointerenter
pointerdown
pointermove
pointerup
pointercancel
pointerout
pointerleave
gotpointercapture
lostpointercapture

Standard events

These events are defined in official Web specifications, and should be common across browsers. Each event is listed along with the interface representing the object sent to recipients of the event (so you can find information about what data is provided with each event) as well as a link to the specification or specifications that define the event.

Event Name Event Type Specification Fired when...
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.
animationend AnimationEvent CSS Animations A CSS animation has completed.
animationiteration AnimationEvent CSS Animations A CSS animation is repeated.
animationstart AnimationEvent 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 Web Audio API
The definition of 'audioprocess' in that specification.
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 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.
blocked IndexedDB An open connection to a database is blocking a versionchange transaction on the same database.
blur FocusEvent DOM L3 An element has lost focus (does not bubble).
boundary SpeechSynthesisEvent Web Speech API The spoken utterance reaches a word or sentence boundary
cached Event Offline The resources listed in the manifest have been downloaded, and the application is now cached.
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.
checking Event Offline The user agent is checking for an update, or attempting to download the cache manifest for the first time.
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 Web Audio API
The definition of 'OfflineAudioCompletionEvent' in that specification.
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 Clipboard The text selection has been added to the clipboard.
cut ClipboardEvent 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 Media Capture and Streams A media device such as a camera, microphone, or speaker is connected or removed from the system.
devicelight DeviceLightEvent Ambient Light Events Fresh data is available from a light sensor.
devicemotion DeviceMotionEvent Device Orientation Events Fresh data is available from a motion sensor.
deviceorientation DeviceOrientationEvent Device Orientation Events Fresh data is available from an orientation sensor.
deviceproximity DeviceProximityEvent Proximity Events Fresh data is available from a proximity sensor (indicates an approximated distance between the device and a nearby object).
DOMActivate UIEvent DOM L3 A button, link or state changing element is activated (use click instead).
DOMAttributeNameChanged MutationNameEvent DOM L3 Removed The name of an attribute changed (use mutation observers instead).
DOMAttrModified MutationEvent DOM L3 The value of an attribute has been modified (use mutation observers instead).
DOMCharacterDataModified 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 MutationNameEvent DOM L3 Removed The name of an element changed (use mutation observers instead).
DOMFocusIn Unimplemented FocusEvent DOM L3 An element has received focus (use focus or focusin instead).
DOMFocusOut Unimplemented FocusEvent DOM L3 An element has lost focus (use blur or focusout instead).
DOMNodeInserted MutationEvent DOM L3 A node has been added as a child of another node (use mutation observers instead).
DOMNodeInsertedIntoDocument MutationEvent DOM L3 A node has been inserted into the document (use mutation observers instead).
DOMNodeRemoved MutationEvent DOM L3 A node has been removed from its parent node (use mutation observers instead).
DOMNodeRemovedFromDocument MutationEvent DOM L3 A node has been removed from the document (use mutation observers instead).
DOMSubtreeModified MutationEvent DOM L3 A change happened in the document (use mutation observers instead).
downloading Event Offline 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.
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 Event Web Speech API The speech recognition service has disconnected.
end 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.
error UIEvent DOM L3 A resource failed to load.
error ProgressEvent Progress and XMLHttpRequest Progression has failed.
error Event Offline An error occurred while downloading the cache manifest or updating the content of the application.
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 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 DOM L3 An element has received focus (does not bubble).
focusinUnimplemented (see bug 687787) FocusEvent DOM L3 An element is about to receive focus (bubbles).
focusoutUnimplemented (see bug 687787) FocusEvent 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.
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 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 Event HTML5.1
The definition of 'NavigatorLanguage.languages' in that specification.
The user's preferred languages have changed.
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 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.
message 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 SpeechRecognitionEvent Web Speech API The speech recognition service returns a final result with no significant recognition.
notificationclick NotificationEvent Notifications API
The definition of 'onnotificationclick' in that specification.
A system notification spawned by ServiceWorkerRegistration.showNotification() has been clicked.
noupdate Event Offline The manifest hadn't changed.
obsolete Event Offline The manifest was found to have become a 404 or 410 page, so the application cache is being deleted.
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 Clipboard Data has been transferred from the system clipboard to the document.
pause Event HTML5 media Playback has been paused.
pause 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.
progress ProgressEvent Offline The user agent is downloading resources listed by the manifest.
push PushEvent Push API A Service Worker has received a push message.
pushsubscriptionchange PushEvent 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.
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 SpeechRecognitionEvent 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 SpeechSynthesisEvent 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 Event Selection API A selection just started.
selectionchange 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
soundend Event Web Speech API Any sound — recognisable speech or not — has stopped being detected.
soundstart Event Web Speech API Any sound — recognisable speech or not — has been detected.
speechend Event Web Speech API Speech recognised by the speech recognition service has stopped being detected.
speechstart 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 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.
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 CSS Transitions A CSS transition has completed.
unload UIEvent DOM L3 The document or a dependent resource is being unloaded.
updateready Event Offline The resources listed in the manifest have been newly redownloaded, and the script can use swapCache() to switch to the new cache.
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 Proximity Events Fresh data is available from a proximity sensor (indicates whether the nearby object is near the device or not).
voiceschanged 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.
vrdisplayconnected Event WebVR API A compatible VR device has been connected to the computer.
vrdisplaydisconnected Event WebVR API A compatible VR device has been disconnected from the computer.
vrdisplaypresentchange Event WebVR API The presenting state of a VR device has changed — i.e. from presenting to not presenting, or vice versa.
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.

© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/Events