HTML5 Event Attributes

The HTML5 event attributes are global and can be applied to most of the elements.

Event Attributes in HTML5

The following event attributes can be applied to the most of the elements for the execution of JavaScript when certain events occur, with some exceptions where it is not relevant such as elements found inside the <head> section, e.g. <title>, <base>, <link> etc.

Window Events

Events related to the window object (applies to the <body> tag):

Attribute Value Description
onafterprint script Fires after the associated document is printed.
onbeforeprint script Fires before the associated document is printed.
onbeforeunload script Fires before a document being unloaded.
onerror script Fires when document errors occur.
onhashchange script Fires when the fragment identifier part of the document's URL i.e. the portion of a URL that follows the sign (#) changes.
onload script Fires when the document has finished loading.
onmessage script Fires when the message event occurs i.e. when user sends a cross-document message or a message is sent from a worker with postMessage() method. See HTML5 Web Workers.
onoffline script Fires when the network connection fails and the browser starts working offline.
ononline script Fires when the network connections returns and the browser starts working online.
onpagehide script Fires when the page is hidden, such as when a user is moving to another webpage.
onpageshow script Fires when the page is shown, such as when a user navigates to a webpage.
onpopstate script Fires when changes are made to the active history.
onresize script Fires when the browser window is resized.
onstorage script Fires when a Web Storage area is updated.
onunload script Fires immediately before the document is unloaded or the browser window is closed.

Form Events

Events that occur due to the user interacting with the HTML form controls.

Attribute Value Description
onblur script Fires when an element loses focus.
onchange script Fires when the value or state of the element is changed.
onfocus script Fires when the element receives focus.
oninput script Fires when the value of an element is changed by the user.
oninvalid script Fires when a submittable element do not satisfy their constraints during form validation.
onreset script Fires when the user resets a form.
onselect script Fires when some text is being selected or the current selection is changed by the user.
onsearch script Fires when the user writes something in a search input field.
onsubmit script Fires when a form is submitted.

Mouse Events

Events that occur due to the user interacting with a pointing device such as a mouse:

Attribute Value Description
onclick script Fires when the user clicks the left mouse button on the element.
ondblclick script Fires when the user double-clicks on the element.
oncontextmenu script Fires when a context menu is triggered by the user through right-click on the element.
ondrag script Fires when the user drags an element. The ondrag event fires throughout the drag operation.
ondragend script Fires when the user releases the mouse button at the end of a drag operation.
ondragenter script Fires when the user drags an element to a valid drop target.
ondragleave script Fires when an element leaves a valid drop target during a drag operation.
ondragover script Fires when an element is being dragged over a valid drop target.
ondragstart script Fires when the user starts to drag a text selection or selected element.
ondrop script Fires when the mouse button is released during a drag-and-drop operation i.e. when dragged element is being dropped.
onmousedown script Fires when the mouse button is pressed over an element.
onmousemove script Fires when the user moves the mouse pointer over an element.
onmouseout script Fires when the user moves the mouse pointer outside the boundaries of an element.
onmouseover script Fires when the user moves the mouse pointer onto an element.
onmouseup script Fires when the user releases the mouse button while the mouse is over an element.
onmousewheel script Deprecated Use the onwheel attribute instead.
onscroll script Fires when the user scrolls the contents of an element by scrolling the element's scrollbar.
onshow script Fires when a contextmenu event was fired onto an element that has a contextmenu attribute.
ontoggle script Fires when the user opens or closes the <details> element.
onwheel script Fires when the user scrolls the contents of an element by rolling the mouse wheel up or down over an element.

Keyboard Events

Events that occur by the user interaction with the keyboard:

Attribute Value Description
onkeydown script Fires when the user presses a key.
onkeypress script Fires when the user presses an alphanumeric key.
onkeyup script Fires when the user releases a key.

Clipboard Events

Events related to modification of the clipboard, that is copy, cut and paste:

Attribute Value Description
oncopy script Fires when the user copies the element or selection, adding it to the system clipboard.
oncut script Fires when the element or selection is removed from the document and added to the system clipboard.
onpaste script Fires when the user pastes data, transferring the data from the system clipboard to the document.

Media Events

Events that occur when handling media elements that are embedded inside the HTML documents, such as <audio> and <video> elements:

Attribute Value Description
onabort script Fires when playback is aborted, but not due to an error.
oncanplay script Fires when enough data is available to play the media, at least for a couple of frames, but would require further buffering.
oncanplaythrough script Fires when entire media can be played to the end without requiring to stop for further buffering.
oncuechange script Fires when the text track cue in a <track> element changes.
ondurationchange script Fires when the duration of the media changes.
onemptied script Fires when the media element is reset to its initial state, either because of a fatal error during load, or because the load() method is called to reload it.
onended script Fires when the end of playback is reached.
onerror script Fires when an error occurs while fetching the media data.
onloadeddata script Fires when media data is loaded at the current playback position.
onloadedmetadata script Fires when metadata of the media (like duration and dimensions) has finished loading.
onloadstart script Fires when loading of the media begins.
onpause script Fires when playback is paused, either by the user or programmatically.
onplay script Fires when playback of the media starts after having been paused i.e. when the play() method is requested.
onplaying script Fires when the audio or video has started playing.
onprogress script Fires periodically to indicate the progress while downloading the media data.
onratechange script Fires when the playback rate or speed is increased or decreased, like slow motion or fast forward mode.
onseeked script Fires when the seek operation ends.
onseeking script Fires when the current playback position is moved.
onstalled script Fires when the download has stopped unexpectedly.
onsuspend script Fires when the loading of the media is intentionally stopped.
ontimeupdate script Fires when the playback position changed, like when the user fast forwards to a different playback position.
onvolumechange script Fires when the volume is changed, or playback is muted or unmuted.
onwaiting script Fires when playback stops because the next frame of a video resource is not available.
 

Note:The event attributes described above, however applied to all the HTML elements, though they are not useful for all elements. For example, only media elements will receive a volumechange event fired by the browser.

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.