HTML DOM Events

HTML DOM Events

HTML DOM events allow JavaScript to register different event handlers on elements in the HTML document.

Events are usually used in conjunction with functions, and the function will not be executed before the event occurs (for example, when the user clicks a button).

For tutorials on events, please study our JavaScript Event Tutorial.

event Description Belongs to
abort This event occurs when the media loading is aborted.
afterprint This event occurs when the page starts printing or the print dialog is closed. Event
animationend This event occurs when the CSS animation ends. AnimationEvent
animationiteration This event occurs during the repetition of the CSS animation. AnimationEvent
animationstart This event occurs when the CSS animation starts. AnimationEvent
beforeprint This event occurs when the page is about to be printed. Event
beforeunload This event occurs before the document is unloaded.
blur This event occurs when the element loses focus. FocusEvent
canplay This event occurs when the browser can start playing media. Event
canplaythrough This event occurs when the browser can play media without stopping the buffering. Event
change This event occurs when the content, selection, or state of the form element changes. Event
click This event occurs when the user clicks on the element. MouseEvent
contextmenu This event occurs when the user right-clicks on an element to open the context menu. MouseEvent
copy This event occurs when the user copies the content of the element. ClipboardEvent
cut This event occurs when the user cuts the content of the element. ClipboardEvent
dblclick This event occurs when the element is double-clicked by the user. MouseEvent
drag This event occurs when the dragging element is ending. DragEvent
dragend An event occurs when the user finishes dragging an element. DragEvent
dragenter An event occurs when the dragged element enters the drop target. DragEvent
dragleave An event occurs when the dragged element leaves the drop target. DragEvent
dragover An event occurs when the dragged element is over the drop target. DragEvent
dragstart An event occurs when the user starts to drag an element. DragEvent
drop An event occurs when the dragged element is dropped onto the drop target. DragEvent
durationchange An event occurs when the duration of the media changes. Event
ended An event occurs when the media reaches the end. Event
error An event occurs after an error occurs while loading an external file.
focus An event occurs when an element gains focus. FocusEvent
focusin An event occurs just before an element gains focus. FocusEvent
focusout An event occurs just before an element loses focus. FocusEvent
fullscreenchange An event occurs when an element is displayed in full-screen mode. Event
fullscreenerror An event occurs when an element cannot be displayed in full-screen mode. Event
hashchange An event occurs when the anchor part of the URL changes. HashChangeEvent
input An event occurs when an element receives user input.
invalid An event occurs when an element is invalid. Event
keydown An event occurs when the user is pressing a key. KeyboardEvent
keypress An event occurs when the user presses a key. KeyboardEvent
keyup An event occurs when the user releases a key. KeyboardEvent
load An event occurs when the object has been loaded.
loadeddata An event occurs after media data is loaded. Event
loadedmetadata An event occurs when metadata (such as size and duration) is being loaded. Event
loadstart An event occurs when the browser starts to fetch the specified media. ProgressEvent
message An event occurs when a message is received through this event source. Event
mousedown An event occurs when the user presses the mouse button over an element. MouseEvent
mouseenter An event occurs when the pointer moves over an element. MouseEvent
mouseleave An event occurs when the pointer moves out of an element. MouseEvent
mousemove An event occurs when the pointer moves over an element. MouseEvent
mouseout An event occurs when the user moves the mouse pointer out of an element or any of its child elements. MouseEvent
mouseover An event occurs when the pointer moves over an element or any of its child elements. MouseEvent
mouseup An event occurs when the user releases the mouse button over an element. MouseEvent
mousewheel Not recommended for use.Please use instead wheel Event. WheelEvent
offline This event occurs when the browser starts working offline. Event
online This event occurs when the browser starts working online. Event
open This event occurs when a connection to the event source is opened. Event
pagehide This event occurs when the user leaves a web page to navigate. PageTransitionEvent
pageshow This event occurs when the user navigates to a web page. PageTransitionEvent
paste This event occurs when some content is pasted into an element by the user. ClipboardEvent
pause This event occurs when the media is paused by the user or paused programmatically. Event
play This event occurs when the media has started or is no longer paused. Event
playing This event occurs when the media is paused or stopped to buffer and then played back. Event
popstate This event occurs when the history of the window changes. PopStateEvent
progress This event occurs when the browser is in the process of fetching media data. Event
ratechange This event occurs when the playback speed of the media changes. Event
reset This event occurs when a form is reset. Event
resize This event occurs when the size of the document view is adjusted.
scroll This event occurs when the scrollbar of a scrollable element is manipulated.
search This event occurs when the user types content into a search field. Event
seeked This event occurs when the user finishes moving/jumping to a new position in the media. Event
seeking This event occurs when the user starts moving/jumping to a new position in the media. Event
select This event occurs after the user selects text (for <input> and <textarea>).
show This event occurs when the <menu> element is displayed as a context menu. Event
stalled This event occurs when the browser tries to fetch media data but the data is not available. Event
storage This event occurs when the web storage area is updated. StorageEvent
submit This event occurs when a form is submitted. Event
suspend This event occurs when the browser intentionally does not fetch media data. Event
timeupdate This event occurs when the playback position changes. Event
toggle This event occurs when the user opens or closes the <details> element. Event
touchcancel This event occurs when the touch is interrupted. TouchEvent
touchend This event occurs when a finger is lifted from the touch screen. TouchEvent
touchmove This event occurs when a finger is dragged on the screen. TouchEvent
touchstart This event occurs when a finger is placed on the touch screen. TouchEvent
transitionend This event occurs when the CSS transition is completed. TransitionEvent
unload This event occurs after the page is unloaded (for <body>).
volumechange This event occurs when the volume of the media has changed. Event
waiting This event occurs when the media has paused but is expected to resume. Event
wheel This event occurs when the mouse wheel scrolls up or down on the element. WheelEvent

HTML DOM Event Properties and Methods

Attribute/Method Description Belongs to
altKey Returns whether the "ALT" key was pressed when the mouse event was triggered. MouseEvent
altKey Returns whether the "ALT" key was pressed when the key event was triggered.
animationName Returns the name of the animation. AnimationEvent
bubbles Returns whether a specific event is a bubbling event. Event
button Returns the mouse button that was pressed when the mouse event was triggered. MouseEvent
buttons Returns the mouse button that was pressed when the mouse event was triggered. MouseEvent
cancelBubble Sets or returns whether the event should propagate up the hierarchy.
cancelable Returns whether the event can prevent its default operation. Event
changeTouches Returns a list of all touch objects whose state has changed between the previous touch and the current touch. TouchEvent
charCode Returns the Unicode character code of the key that triggered the onkeypress event. KeyboardEvent
clientX Returns the horizontal coordinate of the mouse pointer relative to the current window when the mouse event was triggered.
clientY Returns the vertical coordinate of the mouse pointer relative to the current window when the mouse event was triggered.
clipboardData Returns an object containing the data affected by clipboard operations. ClipboardData
code Returns the code of the key that triggered the event. KeyboardEvent
composed Indicates whether the event can be passed from Shadow DOM to the general DOM. Event
composedPath() Returns the event path.
createEvent() Create a new event. Event
ctrlKey Returns whether the "CTRL" key was pressed when the mouse event was triggered. MouseEvent
ctrlKey Returns whether the "CTRL" key was pressed during the key mouse event.
currentTarget Returns the element that triggered the event for its event listener. Event
data Returns the inserted character. InputEvent
dataTransfer Returns an object containing the data being dragged or inserted/deleted.
defaultPrevented Returns whether the preventDefault() method was called for the event. Event
deltaX Returns the horizontal scroll amount (x-axis) of the mouse wheel. WheelEvent
deltaY Returns the vertical scroll amount (y-axis) of the mouse wheel. WheelEvent
deltaZ Returns the Z-axis scroll amount of the mouse wheel. WheelEvent
deltaMode Returns a number representing the unit of measurement for the increment value (pixels, lines, or pages). WheelEvent
detail Returns a number indicating how many times the mouse has been clicked. UiEvent
elapsedTime Returns the number of seconds the animation has run. AnimationEvent
elapsedTime Returns the number of seconds the transition has run.  
eventPhase Returns which phase the current event flow is at. Event
getModifierState() Returns an array containing the target range, which will be affected by insertion/deletion. MouseEvent
getTargetRanges() Returns an array containing the target range, which will be affected by insertion/deletion. InputEvent
inputType Returns the type of change (i.e., "inserting" or "deleting"). InputEvent
isComposing Returns whether the state of the event is being composed.
isTrusted Returns whether the event is trusted. Event
key Returns the key value represented by the event. KeyboardEvent
key Returns the key of the changed storage item. StorageEvent
keyCode Returns the Unicode character code of the key that triggers the onkeypress, onkeydown, or onkeyup event. KeyboardEvent
location Returns the position of the key on the keyboard or device. KeyboardEvent
lengthComputable Returns whether the length of the progress can be calculated. ProgressEvent
loaded Returns the amount of work loaded. ProgressEvent
metaKey Returns whether the "META" key is pressed at the time of event triggering. MouseEvent
metaKey Returns whether the "META" key is pressed when the key event is triggered.
MovementX Returns the horizontal coordinate of the mouse pointer relative to the position of the last mousemove event. MouseEvent
MovementY Returns the vertical coordinate of the mouse pointer relative to the position of the last mousemove event. MouseEvent
newURL Returns the document URL after the hash change. HasChangeEvent
newValue Returns the new value of the storage item after the change. StorageEvent
offsetX Returns the horizontal coordinate of the mouse pointer relative to the edge of the target element. MouseEvent
offsetY Returns the vertical coordinate of the mouse pointer relative to the edge of the target element. MouseEvent
oldURL Returns the document URL before the hash change. HasChangeEvent
oldValue Returns the old value of the storage item after the change. StorageEvent
onemptied This event occurs when there is a bad situation and the media file becomes unavailable suddenly.  
pageX Returns the horizontal coordinate of the mouse pointer relative to the document when the mouse event is triggered. MouseEvent
pageY Returns the vertical coordinate of the mouse pointer relative to the document when the mouse event is triggered. MouseEvent
persisted Returns whether the web page is cached by the browser. PageTransitionEvent
preventDefault() If the event can be canceled, cancel it and do not execute the default action associated with the event. Event
propertyName Returns the name of the CSS property associated with the animation or transition.
pseudoElement Returns the name of the pseudo-element for the animation or transition.
region MouseEvent
relatedTarget Returns the element related to the element that triggered the mouse event. MouseEvent
relatedTarget Returns the element related to the element that triggered the event. FocusEvent
repeat Returns whether a key is held down repeatedly. KeyboardEvent
screenX Returns the horizontal coordinate of the window/mouse pointer relative to the screen. MouseEvent
screenY Returns the vertical coordinate of the window/mouse pointer relative to the screen. MouseEvent
shiftKey Returns whether the "SHIFT" key was pressed when the event was triggered. MouseEvent
shiftKey Returns whether the "SHIFT" key was pressed when the key event was triggered.
state Returns an object containing a copy of the history entry. PopStateEvent
stopImme...() Prevents other listeners from being called for the same event. Event
stopPropagation() Prevents the event from propagating further in the event flow. Event
storageArea Returns an object representing the affected storage object. StorageEvent
target Returns the element that triggered the event. Event
targetTouches Returns a TouchList of Touch objects containing all the touch points still in contact with the touch surface TouchEvent
timeStamp Returns the time (in milliseconds since the epoch) when the event was created. Event
total Returns the total amount of work to be loaded. ProgressEvent
touches Returns a list of all touch objects currently in contact with the surface. TouchEvent
type Returns the name of the event. Event
url Returns the URL of the document where the changed item is located. StorageEvent
which Returns the mouse button that was pressed when the mouse event was triggered. MouseEvent
which 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 KeyboardEvent
view Returns a reference to the Window object on which the event occurred. UiEvent