Tutorials Exercises Services Sign Up Log in
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
HTML DOM Events
❮ Previous Next ❯
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
Tutorials A CSS animation has started
Exercises Services AnimationEvent
Sign Up Log in
beforeprint A page is about to be printed Event
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
beforeunload Before a document is about to be UiEvent, Event
unloaded
blur An element loses focus FocusEvent
canplay The browser can start playing a Event
media (has buffered enough to
begin)
canplaythrough The browser can play through a Event
media without stopping for buffering
change The content of a form element has Event
changed
click An element is clicked on MouseEvent
contextmenu An element is right-clicked to open a MouseEvent
context menu
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 DragEvent
target
dragleave A dragged element leaves the drop DragEvent
target
dragover A dragged element is over the drop DragEvent
target
dragstart Dragging of an element has started DragEvent
drop A dragged element is dropped on DragEvent
the target
durationchange The duration of a media is changed Event
endedTutorials A media has reach the end ("thanks
Exercises Services
for listening")
Event
Sign Up Log in
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
error An error has occurred while loading ProgressEvent,
a file 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 Event
mode
fullscreenerror An element can not be displayed in Event
fullscreen mode
hashchange There has been changes to the HashChangeEvent
anchor part of a URL
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 Event
duration) are loaded
loadstart The browser starts looking for the ProgressEvent
specified media
message A message is received through the Event
event source
mousedown The mouse button is pressed over an MouseEvent
element
mouseenter The pointer is moved onto an MouseEvent
element
mouseleave
Tutorials The pointer is moved out of an
Exercises
element
Services MouseEvent
Sign Up Log in
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
mousemove The pointer is moved over an MouseEvent
element
mouseover The pointer is moved onto an MouseEvent
element
mouseout The pointer is moved out of an MouseEvent
element
mouseup A user releases a mouse button over MouseEvent
an element
mousewheel Deprecated. Use the wheel event WheelEvent
instead
offline The browser starts working offline Event
online The browser starts working online Event
open A connection with the event source Event
is opened
pagehide User navigates away from a PageTransitionEvent
webpage
pageshow User navigates to a webpage PageTransitionEvent
paste Some content is pasted in an ClipboardEvent
element
pause A media is paused Event
play The media has started or is no Event
longer paused
playing The media is playing after being Event
paused or buffered
popstate The window's history changes PopStateEvent
progress The browser is downloading media Event
data
ratechange The playing speed of a media is Event
changed
resize The document view is resized UiEvent, Event
reset Tutorials A form is reset
Exercises Services Event
Sign Up Log in
scroll An scrollbar is being scrolled UiEvent, Event
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
search Something is written in a search Event
field
seeked Skipping to a media position is Event
finished
seeking Skipping to a media position is Event
started
select User selects some text UiEvent, Event
show A <menu> element is shown as a Event
context menu
stalled The browser is trying to get Event
unavailable media data
storage A Web Storage area is updated StorageEvent
submit A form is submitted Event
suspend The browser is intentionally not Event
getting media data
timeupdate The playing position has changed Event
(the user moves to a different point
in the media)
toggle The user opens or closes the Event
<details> element
touchcancel The touch is interrupted TouchEvent
touchend A finger is removed from a touch TouchEvent
screen
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 Event
(includes muting)
