HTML DOM Events
- Previous Page HTML Attribute
- Next Page HTML Event Object
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 |
- Previous Page HTML Attribute
- Next Page HTML Event Object