Hurry! Try our new Interactive Courses for FREE. 🥳   🚀
  Signup/Sign In

HTML Event Attributes

In HTML5, Event Attributes are global in nature means they are used with almost all of the HTML tags.

An attribute of any HTML tag is nothing but a part of it which can be used to add more information to any HTML tag, for example, in an anchor tag, href is an attribute which is used to provide the URL to which the text will be hyperlinked. Similarly, HTML tags can have event attributes, for handling JavaScript Events for those HTML tags/elements.

HTML Event Attributes example

Any HTML tag can have multiple attributes.

  • The Event attributes are applied to HTML tags for the execution of Javascript when certain events occur, for example, onclick, onblur, onmousehover, etc.

  • The Event Attributes are global in nature but there are some exceptions too, the event attributes are not relevant inside the <head> section of an HTML Document for tags like <title> tag , <link>, etc.

The event attributes are basically observers, which are added to any HTML tag to observe any particular event, and when that even occurs with respect to that particular HTML tag for which event attribute is specified, this attribute will fire the function of Javascript expression associated with it.

There is a separate event attribute for every event.

HTML Event Attribute Types

There are few categories for Event attributes and these are based on the event types supported in JavaScript. These are:

  • Window Event Attributes

  • Mouse Event Attributes

  • Form Event Attributes

  • Keyboard Event Attributes

  • Media Event Attributes

Let us discuss each category given above in detail one by one.

Window Event Attributes

Window Events are those events that are related to the window object, and these apply to the HTML <body> tag.

The event attributes under the Window Events category are given below:

Attributes Description
onafterprint This attribute fires just after the document associated with it gets printed
onbeforeprint This attribute fires just before the document associated with it gets printed
onbeforeunload This attribute fires just before the associated document is being unloaded
onerror This attribute fires when an error occurs in the associated document.
onhashchange This attribute fires when the part of the URL that follows the hash sign(#) changes
onload This attribute fires just after the document have finished its loading.
onmessage This attribute fires at the time when message event occurs for eg:- when a message is sent by the user in the form of cross-document
onoffline This attribute fires at the time when the network connection fails and the browser starts working offline
ononline This attribute fires at the time when network connections start working and the browser starts working online
onpagehide This attribute fires at the time when the page is hidden and the user is moving to another webpage
onpageshow This attribute fires when the page is shown and the user is navigating through a webpage
onpopstate This attribute fires when the changes are made to active history.
onresize This attribute fires at the time of resizing of the browser's window
onstorage This attribute fires at the time of updation of web storage
onunload This attribute fires immediately before the browser window is closed

Keyboard Event Attributes

Keyboard Events are those events that occur at the time when a user interacts with the keyboard.

The event attributes under the Keyboard event category are given below:

Attributes Description
onkeydown This attribute fires when a user presses any key on the keyboard.
onkeyup This attribute fires at the time of alphanumeric key pressed by the user
onkeypress This attribute fires when a user releases any key on the keyboard.

Form Event Attributes

Form Events are those events in HTML, which occurs when any user interacts with the form controls.

The event attributes under the Form event category are given below:

Attributes Description
onblur This attribute fires when the element loses its focus.
onchange This attribute fires when either the value or state of an element is changed
onfocus This attribute fires when the element receives its focus.
oninput This attribute fires at the time change in the value of an element by the user.
oninvalid This attribute is fired at the time when a submittable element does not satisfy the constraints during form validation
onreset This attribute fires at the time when the form is reset by the user.
onselect This attribute fires when some part of the text is being selected or there is a change in current selection by the user.
onsearch This attribute fires when the user does write some text in the searching field.
onsubmit This attribute is fired at the time of form submission.

ClipBoard Event Attributes

ClipBoard Events are those events that are related to the modification of the clipboard like copy, cut and paste.

The event attributes under the Clipboard event category are given below:

Attributes Description
oncopy This attribute fires when a user copies the element or select a piece of text, adding it to the system clipboard.
oncut This attribute fires when the element or a selected piece of text is removed from the document and added to the system clipboard.
onpaste This attribute fires when the user pastes data, transferring the data from the system clipboard to the document.

Media Event Attributes

Media Events are those events that occur at the time of handling events of media elements that are embedded inside HTML Documents, for example <audio> tag, <video> tag, <embed> tag, etc.

The event attributes under the Media event category are given below:

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

Mouse Event Attributes

Mouse events are those events that occur when the user interacts with the pointing device like a mouse.

The event attributes under the Mouse event category are given below:

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

With this we have listed down all the event attributes which you can use with yout HTML tags. Go ahead and try a few in our Web playground.