HTML DOM Events
DOM Events allow JavaScript to add event listener or event handlers to HTML elements.
For a tutorial about Events, read our JavaScript Events Tutorial.
Examples
In HTML onclick is the event listener, myFunction is the event handler:
<button onclick="myFunction()">Click me</button>
In JavaScript click is the event, myFunction is the event handler:
button.addEventListener("click", myFunction);
Event | Occurs When | Belongs To |
---|---|---|
abort | The loading of a media is aborted | UiEvent, Event |
afterprint | A page has started printing | Event |
animationend | A CSS animation has completed | AnimationEvent |
animationiteration | A CSS animation is repeated | AnimationEvent |
animationstart | A CSS animation has started | AnimationEvent |
beforeprint | A page is about to be printed | Event |
beforeunload | Before a document is about to be unloaded | UiEvent, Event |
blur | An element loses focus | FocusEvent |
canplay | The browser can start playing a media (has buffered enough to begin) | Event |
canplaythrough | The browser can play through a media without stopping for buffering | Event |
change | The content of a form element has changed | Event |
click | An element is clicked on | MouseEvent |
contextmenu | An element is right-clicked to open a context menu | MouseEvent |
copy | The content of an element is copied | ClipboardEvent |
cut | The content of an element is cut | ClipboardEvent |
dblclick | An element is double-clicked | MouseEvent |
drag | An element is being dragged | DragEvent |
dragend | Dragging of an element has ended | DragEvent |
dragenter | A dragged element enters the drop target | DragEvent |
dragleave | A dragged element leaves the drop target | DragEvent |
dragover | A dragged element is over the drop target | DragEvent |
dragstart | Dragging of an element has started | DragEvent |
drop | A dragged element is dropped on the target | DragEvent |
durationchange | The duration of a media is changed | Event |
ended | A media has reach the end ("thanks for listening") | Event |
error | An error has occurred while loading a file | ProgressEvent, UiEvent, Event |
focus | An element gets focus | FocusEvent |
focusin | An element is about to get focus | FocusEvent |
focusout | An element is about to lose focus | FocusEvent |
fullscreenchange | An element is displayed in fullscreen mode | Event |
fullscreenerror | An element can not be displayed in fullscreen mode | Event |
hashchange | There has been changes to the anchor part of a URL | HashChangeEvent |
input | An element gets user input | InputEvent, Event |
invalid | An element is invalid | Event |
keydown | A key is down | KeyboardEvent |
keypress | A key is pressed | KeyboardEvent |
keyup | A key is released | KeyboardEvent |
load | An object has loaded | UiEvent, Event |
loadeddata | Media data is loaded | Event |
loadedmetadata | Meta data (like dimensions and duration) are loaded | Event |
loadstart | The browser starts looking for the specified media | ProgressEvent |
message | A message is received through the event source | Event |
mousedown | The mouse button is pressed over an element | MouseEvent |
mouseenter | The pointer is moved onto an element | MouseEvent |
mouseleave | The pointer is moved out of an element | MouseEvent |
mousemove | The pointer is moved over an element | MouseEvent |
mouseover | The pointer is moved onto an element | MouseEvent |
mouseout | The pointer is moved out of an element | MouseEvent |
mouseup | A user releases a mouse button over an element | MouseEvent |
mousewheel | Deprecated. Use the wheel event instead | WheelEvent |
offline | The browser starts working offline | Event |
online | The browser starts working online | Event |
open | A connection with the event source is opened | Event |
pagehide | User navigates away from a webpage | PageTransitionEvent |
pageshow | User navigates to a webpage | PageTransitionEvent |
paste | Some content is pasted in an element | ClipboardEvent |
pause | A media is paused | Event |
play | The media has started or is no longer paused | Event |
playing | The media is playing after being paused or buffered | Event |
popstate | The window's history changes | PopStateEvent |
progress | The browser is downloading media data | Event |
ratechange | The playing speed of a media is changed | Event |
resize | The document view is resized | UiEvent, Event |
reset | A form is reset | Event |
scroll | An scrollbar is being scrolled | UiEvent, Event |
search | Something is written in a search field | Event |
seeked | Skipping to a media position is finished | Event |
seeking | Skipping to a media position is started | Event |
select | User selects some text | UiEvent, Event |
show | A <menu> element is shown as a context menu | Event |
stalled | The browser is trying to get unavailable media data | Event |
storage | A Web Storage area is updated | StorageEvent |
submit | A form is submitted | Event |
suspend | The browser is intentionally not getting media data | Event |
timeupdate | The playing position has changed (the user moves to a different point in the media) | Event |
toggle | The user opens or closes the <details> element | Event |
touchcancel | The touch is interrupted | TouchEvent |
touchend | A finger is removed from a touch screen | TouchEvent |
touchmove | A finger is dragged across the screen | TouchEvent |
touchstart | A finger is placed on a touch screen | TouchEvent |
transitionend | A CSS transition has completed | TransitionEvent |
unload | A page has unloaded | UiEvent, Event |
volumechange | The volume of a media is changed (includes muting) | Event |
waiting | A media is paused but is expected to resume (e.g. buffering) | Event |
wheel | The mouse wheel rolls up or down over an element | WheelEvent |