HTML Tutorial
HTML - Introduction HTML - Basic HTML - Structure HTML - Element HTML - Attributes HTML - Headings HTML - Paragraphs HTML - Styles HTML - Formatting HTML - Phrase Tags HTML - Quotations HTML - Comments HTML - Colors HTML - CSS HTML - Links HTML - Images HTML - Tables HTML - List HTML - Inline elements HTML - Block elements HTML - Classes HTML - Id HTML - Javascript HTML - File Path HTML - Iframe HTML - Responsive HTML - Computer Code HTML - Head tag HTML - Events HTML - Url Encoding HTML - Entities HTML - Validation
HTML Forms
HTML - Forms HTML - Form Elements HTML - Input types HTML - Input Attributes
HTML5
HTML5 - Introduction HTML5 - New Elements HTML5 - Semantics HTML5 - Style Guide
HTML Media
HTML - Video HTML - Audio HTML - Embed Multimedia
HTML Graphics
HTML - Canvas HTML - SVG
HTML APIs
HTML - Geolocation HTML - Drag & drop HTML - Web Storage HTML - Web Workers
HTML References
HTML - Tag Reference HTML - Tag by Category HTML - Attributes HTML - Global Attributes HTML - Events HTML - Language Codes HTML - Country Codes HTML - URL Encoding HTTP Methods HTTP Status Codes <input> types

HTML Events

Events are actions that take place in the browser that can be initiated by either the user or the browser itself.

Below are a few examples of common events that can happen on a website:

  • The page finishes loading
  • The user clicks a button
  • The user scroll document
  • The user resize browser
  • The user move mouse
  • The user submits a form
  • The user presses a key on their keyboard
  • An HTML input field was changed

A Simple Example

A JavaScript block of code can be executed when an event fires, like when the user clicks on an element.

In the following example, we have an H3 element, which when clicked, will call fun1() function:

The JavaScript fun1() function looks like so:

Run code

The following example uses onmouseenter event instead of onclick event:

Run code

Resource Events

Event Description
onbeforeunload The event occurs when the document is about to be unloaded
oncached The resources listed in the manifest have been downloaded, and the application is now cached
onerror The event triggers when a resource failed to load
onhashchange The event occurs when there has been changes to the anchor part of the a URL
onload The event occurs after the page is finished loading
onunload The event occurs once a page has unloaded
onstorage The event occurs when a Web Storage area is updated

Network Events

Event Description
onoffline The event occurs when the browser starts to work offline
ononline The event occurs when the browser starts to work online

Keyboard Events

Event Description
onkeydown The event occurs when the user is pressing a key
onkeypress The event occurs when the user presses a key
onkeyup The event occurs when the user releases a key

Printing Events

Event Description
onafterprint The event occurs after the document is printed
onbeforeprint The event occurs before the document is printed

Mouse Events

Event Description
onclick The event occurs when the user clicks on an element
ondblclick The event occurs when the user double-clicks on an element
oncontextmenu The event occurs when the user right-clicks on an element to open a context menu
onmousedown The event occurs when the user presses a mouse button over an element
onmouseup The event occurs when a user releases a mouse button over an element
onmouseenter The event occurs when the pointer is moved onto an element
onmouseleave The event occurs when the pointer is moved out of an element
onmousemove The event occurs when the pointer is moving while it is over an element
onmouseover The event occurs when the pointer is moved onto an element, or onto one of its children
onmouseout The event occurs when a user moves the mouse pointer out of an element, or out of one of its children
onwheel The event occurs when the mouse wheel rolls up or down over an element


Form Events

Event Description
onfocus The event occurs when an element gets focus
onblur The event occurs when an element loses focus
onchange The event occurs when the content of a form is changed
oninput The event occurs when an element gets user input
oninvalid The event occurs when an element is invalid
onreset The event occurs when a form is reset
onsearch The event occurs when the user writes something in a search field
onselect The event occurs after the user selects some text (input and textarea)
onsubmit The event occurs when a form is submitted

Drag Events

Event Description
ondrag The event occurs when an element is being dragged
ondragend The event occurs when the user has finished dragging an element
ondragenter The event occurs when the dragged element enters the drop target
ondragleave The event occurs when the dragged element leaves the drop target
ondragover The event occurs when the dragged element is over the drop target
ondragstart The event occurs when the user starts to drag an element
ondrop The event occurs when the dragged element is dropped on the drop target

Clipboard Events

Event Description
oncopy The event occurs when the user copies the content of an element
oncut The event occurs when the user cut the content of an element
onpaste The event occurs when the user paste the content of an element

Media Events

Event Description
onabort The event occurs on abort
oncanplay The event occurs when a file is ready to start playing
oncanplaythrough The event occurs when a file can be played all the way to the end without pausing for buffering
oncuechange The event occurs when the cue changes in a <track> element
ondurationchange The event occurs when the duration of the media changes
onemptied The event occurs when something bad happens and the file is suddenly unavailable
onended The event occurs when the media has reach the end
onloadeddata The event occurs when media data is loaded
onloadedmetadata The event occurs when metadata are loaded
onloadstart The event occurs when the file begins to load
onpause The event occurs when the media is paused
onplay The event occurs when the media is ready to play
onprogress The event occurs when the browser is in the process of getting the media data
onratechange The event occurs when a user switches to a slow motion or fast forward mode
onseeking The event occurs when the user start seeking media
onseeked The event occurs after seeking
onstalled The event occurs when the browser is unable to fetch the media data
onsuspend The event occurs when fetching the media data is stopped before it is completely loaded
ontimeupdate The event occurs when the playing position has changed
onvolumechange The event occurs when the volume is changed
onwaiting The event occurs when the media pauses to buffer more data

Websocket Events

Event Description
onopen A WebSocket connection has been established
onmessage A message is received through a WebSocket
onerror A WebSocket connection has been closed with prejudice (some data couldn't be sent for example)
onclose A WebSocket connection has been closed

Session History Events

Event Description
onpagehide A session history entry is being traversed from
onpageshow A session history entry is being traversed to
onpopstate A session history entry is being navigated to (in certain cases)

View Events

Event Description
onfullscreenchange An element was turned to fullscreen mode or back to normal mode
onfullscreenerror It was impossible to switch to fullscreen mode for technical reasons or because the permission was denied
onresize The event occurs when the browser window is resized
onscroll The document view or an element has been scrolled

CSS Animation Events

Event Description
onanimationstart A CSS animation has started
onanimationend A CSS animation has completed
onanimationiteration A CSS animation is repeated

CSS Transition Events

Event Description
ontransitionstart A CSS transition has actually started (fired after any delay)
ontransitioncancel A CSS transition has been cancelled
ontransitionend A CSS transition has completed
ontransitionrun A CSS transition has begun running (fired before any delay starts)

Misc

Event Description
ontoggle The event occurs when the user opens or closes the <details> element