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).

For a tutorial about Events, read our JavaScript Events Tutorial.

Event Description Belongs To

The event occurs when the loading of a
abort UiEvent, Event
media is aborted
The event occurs when a page has started
afterprint printing, or if the print dialogue box has been Event
closed
The event occurs when a CSS animation has
animationend AnimationEvent
completed
The event occurs when a CSS animation is
animationiteration AnimationEvent
repeated
The event occurs when a CSS animation has
animationstart AnimationEvent
started
The event occurs when a page is about to be
beforeprint Event
printed
The event occurs before the document is
beforeunload UiEvent, Event
about to be unloaded
The event occurs when an element loses
blur FocusEvent
focus
The event occurs when the browser can start
canplay playing the media (when it has buffered Event
enough to begin)
The event occurs when the browser can play
canplaythrough through the media without stopping for Event
buffering
The event occurs when the content of a form
element, the selection, or the checked state
change Event
have changed (for <input>, <select>, and
<textarea>)
The event occurs when the user clicks on an
click MouseEvent
element
The event occurs when the user right-clicks
contextmenu MouseEvent
on an element to open a context menu
The event occurs when the user copies the
copy ClipboardEvent
content of an element
The event occurs when the user cuts the
cut ClipboardEvent
content of an element
 The event occurs when the user double-clicks
dblclick MouseEvent
on an element
The event occurs when an element is being
drag DragEvent
dragged
The event occurs when the user has finished
dragend DragEvent
dragging an element
The event occurs when the dragged element
dragenter DragEvent
enters the drop target
The event occurs when the dragged element
dragleave DragEvent
leaves the drop target
The event occurs when the dragged element
dragover DragEvent
is over the drop target
The event occurs when the user starts to drag
dragstart DragEvent
an element
The event occurs when the dragged element
drop DragEvent
is dropped on the drop target
The event occurs when the duration of the
durationchange Event
media is changed
The event occurs when the media has reach
ended the end (useful for messages like "thanks for Event
listening")
The event occurs when an error occurs while ProgressEvent, UiEvent,
error
loading an external file Event
focus The event occurs when an element gets focus FocusEvent
The event occurs when an element is about to
focusin FocusEvent
get focus
The event occurs when an element is about to
focusout FocusEvent
lose focus
The event occurs when an element is
fullscreenchange Event
displayed in fullscreen mode
The event occurs when an element can not be
fullscreenerror Event
displayed in fullscreen mode
The event occurs when there has been
hashchange HashChangeEvent
changes to the anchor part of a URL
The event occurs when an element gets user
input InputEvent, Event
input
invalid The event occurs when an element is invalid Event
The event occurs when the user is pressing a
keydown KeyboardEvent
key
keypress The event occurs when the user presses a key KeyboardEvent
The event occurs when the user releases a
keyup KeyboardEvent
key
load The event occurs when an object has loaded UiEvent, Event
loadeddata The event occurs when media data is loaded Event
loadedmetadata The event occurs when meta data (like Event
 dimensions and duration) are loaded
The event occurs when the browser starts
loadstart ProgressEvent
looking for the specified media
The event occurs when a message is received
message Event
through the event source
The event occurs when the user presses a
mousedown MouseEvent
mouse button over an element
The event occurs when the pointer is moved
mouseenter MouseEvent
onto an element
The event occurs when the pointer is moved
mouseleave MouseEvent
out of an element
The event occurs when the pointer is moving
mousemove MouseEvent
while it is over an element
The event occurs when the pointer is moved
mouseover MouseEvent
onto an element, or onto one of its children
The event occurs when a user moves the
mouseout mouse pointer out of an element, or out of MouseEvent
one of its children
The event occurs when a user releases a
mouseup MouseEvent
mouse button over an element
mousewheel Deprecated. Use the wheel event instead WheelEvent
The event occurs when the browser starts to
offline Event
work offline
The event occurs when the browser starts to
online Event
work online
The event occurs when a connection with the
open Event
event source is opened
The event occurs when the user navigates
pagehide PageTransitionEvent
away from a webpage
The event occurs when the user navigates to
pageshow PageTransitionEvent
a webpage
The event occurs when the user pastes some
paste ClipboardEvent
content in an element
The event occurs when the media is paused
pause Event
either by the user or programmatically
The event occurs when the media has been
play Event
started or is no longer paused
The event occurs when the media is playing
playing after having been paused or stopped for Event
buffering
The event occurs when the window's history
popstate PopStateEvent
changes
The event occurs when the browser is in the
progress process of getting the media data Event
(downloading the media)
 The event occurs when the playing speed of
ratechange Event
the media is changed
The event occurs when the document view is
resize UiEvent, Event
resized
reset The event occurs when a form is reset Event
The event occurs when an element's scrollbar
scroll UiEvent, Event
is being scrolled
The event occurs when the user writes
search something in a search field (for Event
<input="search">)
The event occurs when the user is finished
seeked moving/skipping to a new position in the Event
media
The event occurs when the user starts
seeking moving/skipping to a new position in the Event
media
The event occurs after the user selects
select UiEvent, Event
some text (for <input> and <textarea>)
The event occurs when a <menu> element is
show Event
shown as a context menu
The event occurs when the browser is trying
stalled Event
to get media data, but data is not available
The event occurs when a Web Storage area is
storage StorageEvent
updated
submit The event occurs when a form is submitted Event
The event occurs when the browser is
suspend Event
intentionally not getting media data
The event occurs when the playing position
timeupdate has changed (like when the user fast forwards Event
to a different point in the media)
The event occurs when the user opens or
toggle Event
closes the <details> element
The event occurs when the touch is
touchcancel TouchEvent
interrupted
The event occurs when a finger is removed
touchend TouchEvent
from a touch screen
The event occurs when a finger is dragged
touchmove TouchEvent
across the screen
The event occurs when a finger is placed on a
touchstart TouchEvent
touch screen
The event occurs when a CSS transition has
transitionend TransitionEvent
completed
The event occurs once a page has unloaded
unload UiEvent, Event
(for <body>)
volumechange The event occurs when the volume of the Event
 media has changed (includes setting the
volume to "mute")
The event occurs when the media has paused
waiting but is expected to resume (like when the Event
media pauses to buffer more data)
The event occurs when the mouse wheel rolls
wheel WheelEvent
up or down over an element

HTML DOM Event Properties and Methods

Property/Method Description Belongs To
Returns whether the "ALT" key was pressed when
altKey MouseEvent
the mouse event was triggered
Returns whether the "ALT" key was pressed when KeyboardEvent,
altKey
the key event was triggered TouchEvent
animationName Returns the name of the animation AnimationEvent
Returns whether or not a specific event is a
bubbles Event
bubbling event
Returns which mouse button was pressed when the
button MouseEvent
mouse event was triggered
Returns which mouse buttons were pressed when
buttons MouseEvent
the mouse event was triggered
Returns whether or not an event can have its default
cancelable Event
action prevented
Returns the Unicode character code of the key that
charCode KeyboardEvent
triggered the onkeypress event
Returns a list of all the touch objects whose state
changeTouches TouchEvent
changed between the previous touch and this touch
Returns the horizontal coordinate of the mouse
MouseEvent,
clientX pointer, relative to the current window, when the
TouchEvent
mouse event was triggered
Returns the vertical coordinate of the mouse
MouseEvent,
clientY pointer, relative to the current window, when the
TouchEvent
mouse event was triggered
Returns an object containing the data affected by
clipboardData ClipboardData
the clipboard operation
code Returns the code of the key that triggered the event KeyboardEvent
composed Returns whether the event is composed or not Event
createEvent() Creates a new event Event
Returns whether the "CTRL" key was pressed when
ctrlKey MouseEvent
the mouse event was triggered
Returns whether the "CTRL" key was pressed when KeyboardEvent,
ctrlKey
the key event was triggered TouchEvent
currentTarget Returns the element whose event listeners triggered Event
 the event
data Returns the inserted characters InputEvent
Returns an object containing the data being DragEvent,
dataTransfer
dragged/dropped, or inserted/deleted InputEvent
Returns whether or not the preventDefault() method
defaultPrevented Event
was called for the event
Returns the horizontal scroll amount of a mouse
deltaX WheelEvent
wheel (x-axis)
Returns the vertical scroll amount of a mouse wheel
deltaY WheelEvent
(y-axis)
Returns the scroll amount of a mouse wheel for the
deltaZ WheelEvent
z-axis
Returns a number that represents the unit of
deltaMode measurements for delta values (pixels, lines or WheelEvent
pages)
Returns a number that indicates how many times
detail UiEvent
the mouse was clicked
Returns the number of seconds an animation has
elapsedTime AnimationEvent
been running
Returns the number of seconds a transition has been
elapsedTime
running
Returns which phase of the event flow is currently
eventPhase Event
being evaluated
Returns an array containing target ranges that will
getTargetRanges() InputEvent
be affected by the insertion/deletion
Returns an array containing target ranges that will
getModifierState() MouseEvent
be affected by the insertion/deletion
Returns the type of the change (i.e "inserting" or
inputType InputEvent
"deleting")
Returns whether the state of the event is composing InputEvent,
isComposing
or not KeyboardEvent
isTrusted Returns whether or not an event is trusted Event
Returns the key value of the key represented by the
key KeyboardEvent
event
key Returns the key of the changed storage item StorageEvent
Returns the Unicode character code of the key that
triggered the onkeypress event, or the Unicode key
keyCode KeyboardEvent
code of the key that triggered the onkeydown or
onkeyup event
Returns the location of a key on the keyboard or
location KeyboardEvent
device
Returns whether the length of the progress can be
lengthComputable ProgressEvent
computable or not
loaded Returns how much work has been loaded ProgressEvent
metaKey Returns whether the "META" key was pressed MouseEvent
 when an event was triggered
Returns whether the "meta" key was pressed when KeyboardEvent,
metaKey
the key event was triggered TouchEvent
Returns the horizontal coordinate of the mouse
MovementX pointer relative to the position of the last MouseEvent
mousemove event
Returns the vertical coordinate of the mouse pointer
MovementY MouseEvent
relative to the position of the last mousemove event
newValue Returns the new value of the changed storage item StorageEvent
Returns the URL of the document, after the hash
newURL HasChangeEvent
has been changed
Returns the horizontal coordinate of the mouse
offsetX pointer relative to the position of the edge of the MouseEvent
target element
Returns the vertical coordinate of the mouse pointer
offsetY relative to the position of the edge of the target MouseEvent
element
oldValue Returns the old value of the changed storage item StorageEvent
Returns the URL of the document, before the hash
oldURL HasChangeEvent
was changed
The event occurs when something bad happens and
onemptied the media file is suddenly unavailable (like
unexpectedly disconnects)
Returns the horizontal coordinate of the mouse
pageX pointer, relative to the document, when the mouse MouseEvent
event was triggered
Returns the vertical coordinate of the mouse
pageY pointer, relative to the document, when the mouse MouseEvent
event was triggered
Returns whether the webpage was cached by the
persisted PageTransitionEvent
browser
Cancels the event if it is cancelable, meaning that
preventDefault() the default action that belongs to the event will not Event
occur
Returns the name of the CSS property associated AnimationEvent,
propertyName
with the animation or transition TransitionEvent
Returns the name of the pseudo-element of the AnimationEvent,
pseudoElement
animation or transition TransitionEvent
region MouseEvent
Returns the element related to the element that
relatedTarget MouseEvent
triggered the mouse event
Returns the element related to the element that
relatedTarget FocusEvent
triggered the event
Returns whether a key is being hold down
repeat KeyboardEvent
repeatedly, or not
 Returns the horizontal coordinate of the mouse
screenX pointer, relative to the screen, when an event was MouseEvent
triggered
Returns the vertical coordinate of the mouse
screenY pointer, relative to the screen, when an event was MouseEvent
triggered
Returns whether the "SHIFT" key was pressed
shiftKey MouseEvent
when an event was triggered
Returns whether the "SHIFT" key was pressed KeyboardEvent,
shiftKey
when the key event was triggered TouchEvent
Returns an object containing a copy of the history
state PopStateEvent
entries
Prevents other listeners of
stopImmediatePropagation() the same event from being Event
called
Prevents further propagation of an event during
stopPropagation() Event
event flow
Returns an object representing the affected storage
storageArea StorageEvent
object
target Returns the element that triggered the event Event
Returns a list of all the touch objects that are in
contact with the surface and where the touchstart
targetTouches TouchEvent
event occured on the same target element as the
current target element
Returns the time (in milliseconds relative to the
timeStamp Event
epoch) at which the event was created
Returns the total amount of work that will be
total ProgressEvent
loaded
Returns a list of all the touch objects that are
touches TouchEvent
currently in contact with the surface
The event occurs when a CSS transition has
transitionend TransitionEvent
completed
type Returns the name of the event Event
url Returns the URL of the changed item's document StorageEvent
Returns which mouse button was pressed when the
which MouseEvent
mouse event was triggered
Returns the Unicode character code of the key that
triggered the onkeypress event, or the Unicode key
which KeyboardEvent
code of the key that triggered the onkeydown or
onkeyup event
Returns a reference to the Window object where the
view UiEvent
event occurred