HTML Events


Attributes of a Global Events

HTML allows events to trigger browser actions, such as starting a JavaScript when a user clicks on an element.

The global event attributes listed below can be added to HTML elements to define event actions.


Attributes of Window Events 

The following events are triggered for the window object (applies to the <body> tag):

Attribute Value Description
onafterprint script Script to be executed after the document has been printed.
onbeforeprint script Before printing the document, run this script.
onbeforeunload script When the document is about to be unloaded, this script will be executed.
onerror script When an error occurs, this script is executed.
onhashchange script When the anchor portion of a URL changes, this script is called.
onload script After the page has finished loading, this event occurs.
onmessage script When the message is triggered, the script is executed.
onoffline script When the browser goes offline, this script is executed.
ononline script When the browser connects to the internet, this script is executed.
onpagehide script When a user navigates away from a page, this script is executed.
onpageshow script When a user navigates to a page, this script is executed.
onpopstate script When the history of the window changes, this script is executed.
onresize script When the browser window is resized, this event occurs.
onstorage script When a Web Storage area is updated, a script is executed.
onunload script When a page has been unloaded, this event is triggered (or the browser window has been closed).

Form Events :

Events triggered by actions within an HTML form (this applies to almost all HTML elements, but it is most commonly used in form elements):

Attribute Value Description
onblur script When the element loses focus, this function is triggered.
onchange script When the element's value is changed, this event is triggered.
oncontextmenu script When a context menu is triggered, this script is executed.
onfocus script When the element is focused, this event is triggered.
oninput script When an element receives user input, this script is executed.
oninvalid script When an element is invalid, this script is executed.
onreset script When a form's Reset button is clicked, this event occurs.
onsearch script When a user types something into a search field (for <input="search">), this event occurs.
onselect script This event is triggered after some text in an element has been selected.
onsubmit script When a form is submitted, this event is triggered.

Keyboard Events :

Attribute Value Description
onkeydown script When a user presses a key, this event occurs.
onkeypress script When a user presses a key, this event occurs.
onkeyup script When a user releases a key, this event is triggered.

Mouse Events :

Attribute Value Description
onclick script When the element is clicked with the mouse, this event is triggered.
ondblclick script Fires when the element is double-clicked with the mouse.
onmousedown script When a mouse button is pressed on an element, this event is triggered.
onmousemove script When the mouse pointer moves while over an element, this event is triggered.
onmouseout script When the mouse pointer leaves an element, this event is triggered.
onmouseover script When the mouse pointer passes over an element, this event is triggered.
onmouseup script When the mouse button is released over an element, this event is triggered.
onmousewheel script Deprecated. Instead, use the on wheel attribute.
onwheel script When the mouse wheel moves up or down over an element, this event is triggered.

Drag Events :

Attribute Value Description
ondrag script When an element is dragged, a script is executed.
ondragend script Script to be executed at the conclusion of a drag operation.
ondragenter script When an element is dragged to a valid drop target, this script is executed.
ondragleave script When an element leaves a valid drop target, this script is executed.
ondragover script When an element is dragged over a valid drop target, this script is executed.
ondragstart script Script that will be executed at the start of a drag operation.
ondrop script When a dragged element is dropped, a script is executed.
onscroll script When an element's scrollbar is scrolled, this script is executed.

Clipboard Events :

Attribute Value Description
oncopy script When a user copies the content of an element, this event occurs.
oncut script When a user cuts the content of an element, this event occurs.
onpaste script When a user pastes content into an element, this event occurs.

Media Events :

Events caused by media such as videos, images, and audio (applies to all HTML elements, but is most common in media elements such as <audio>, <embed>, <img>, <object>, and <video>).

Attribute Value Description
onabort script Script to be executed on abort.
oncanplay script When a file is ready to play, a script is executed (when it has buffered enough to begin).
oncanplaythrough script When a file can be played all the way through without pausing for buffering, this script is executed.
oncuechange script When the cue in a <track> element changes, this script is executed.
ondurationchange script Script that will be executed when the length of the media changes.
onemptied script When something bad happens and the file becomes suddenly unavailable, this script should be run (like unexpectedly disconnects).
onended script When the media has reached its conclusion, the script will be executed (a useful event for messages like "thanks for listening").
onerror script Script to be executed if an error occurs while loading the file.
onloadeddata script When media data is loaded, this script is executed.
onloadedmetadata script When metadata (such as dimensions and duration) is loaded, this script is executed.
onloadstart script Script to be executed just as the file begins to load, before anything else is loaded.
onpause script When the media is paused, either by the user or programmatically, this script is executed.
onplay script When the media is ready to play, run this script.
onplaying script Script to be executed once the media has begun to play.
onprogress script Script to be executed while the browser is retrieving media data.
onratechange script Script that will be executed each time the playback rate changes (like when a user switches to a slow motion or fast forward mode).
onseeked script When the seeking attribute is set to false, it indicates that the seeking process has ended.
onseeking script When the seeking attribute is set to true, indicating that seeking is active, this script is executed.
onstalled script When the browser is unable to fetch the media data for whatever reason, this script is executed.
onsuspend script For whatever reason, the script to be run when fetching the media data is interrupted before it is completely loaded is terminated.
ontimeupdate script When the playing position changes, this script will be executed (like when the user fast forwards to a different point in the media).
onvolumechange script Script that will be executed each time the volume is changed (includes setting the volume to "mute").
onwaiting script When the media has been paused but is expected to resume, this script will be executed (like when the media pauses to buffer more data).

Misc Events :

Attribute Value Description
ontoggle script When the user opens or closes the <details> element, this event occurs.