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.
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:
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.
