THE WORLD'S LARGEST WEB DEVELOPER SITE

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

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

HTML DOM Event Properties and Methods

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