1. What Are HTML Event Attributes?
Before discussing, let's discuss briefly what are attributes? An HTML attribute is a specific set of instructions that are given to an HTML element. Some attributes are element dependent, whereas, certain attributes are globally accepted. These global attributes can be used with all the HTML elements. Further, there is a lot of HTML event attributes that are available in HTML. These event attributes triggers some sort of JavaScript defined within the HTML tag or an externally linked script. Further, whenever some event happens, the attribute defined script triggers automatically. This is the beauty of HTML event attributes and creates some dynamic environment within static HTML pages. The below table acts as a guide/reference and lists all the HTML event attributes according to their types.
2. Window Event Attributes
The HTML event attributes that are related to windows object and mostly applied to <body> tag. Below is the list of all window event attributes.
| Attribute | Value | Description |
| onafterprint | script | A script defined by onafterprint attribute runs after a document prints. |
| onbeforeprint | script | A script defined by onbeforeprint attribute runs before a document prints. |
| onbeforeunload | script | The script defined using onbeforeunload attribute runs when the document is about to be unloaded |
| onerror | script | A script triggers defined in onerror when some error occurs. |
| onhashchange | script | A script in onhashchange attribute runs if there is some change in the URL |
| onload | script | A script loads defined in onload attribute after an element is finished loading. |
| onoffline | script | When the browser starts working offline, the onoffline attribute triggers the script. |
| ononline | script | Some script triggers when the browser starts working online using ononline attribute. |
| onpagehide | script | On navigating away from the page, the script inside the onpagehide attribute runs. |
| onpageshow | script | On navigating to the page, the script inside the onpageshow attribute runs. |
| onpopstate | script | Some script runs when the windows history changes. |
| onresize | script | Some script triggers on resizing the window of the browser. |
| onstorage | script | When a Web Storage area is updated, a script runs. |
| onunload | script | When the browser window is closed, some script runs. |
3. Form Event Attributes
The HTML event attributes that are related to the HTML form element are listed below.
| Attribute | Value | Description |
| onblur | script | When the element loses focus, the script runs defined by onblur HTML attribute. |
| onchange | script | When the content of the element is changed, the script runs set by the onchange attribute. |
| oncontextmenu | script | A script contained in oncontextmenu attribute runs when a context menu is triggered |
| onfocus | script | When the element gets focus, the script runs defined by the onblur HTML attribute. |
| oninput | script | When an element gets an input by the user, a script defined in oninput attribute triggers. |
| oninvalid | script | A script runs if the element gets invalid. |
| onreset | script | Some script triggers on pressing the reset button in a form. |
| onsearch | script | Some script runs while the user writes something in the search field. |
| onselect | script | When an element gets selected, the onselect attribute triggers some script. |
| onsubmit | script | Upon form submission, script triggers. |
4. Keyboard Event Attributes
The HTML event attributes that are related to Keyboard interactions are listed below.
| Attribute | Value | Description |
| onkeydown | script | While a user pressing a key, a script defined in onkeydown attribute triggers. |
| onkeypress | script | When a user presses a key, a script defined in onkeypress attribute triggers. |
| onkeyup | script | While a user releasing a key, a script defined in onkeyup attribute triggers. |
5. Mouse Event Attributes
The HTML event attributes that are related to mouse buttons or events are listed below.
| Attribute | Value | Description |
| onclick | script | When someone clicks the element, the script defined by onclick runs immediately. |
| ondblclick | script | If the user double clicks the content of an element, the script of the ondblclick attribute runs. |
| onmousedown | script | While a user presses a mouse button on an element, a script defined in the onmousedown attribute triggers. |
| onmousemove | script | Some script defined inside the onmousemove attribute runs as long as the mouse is moving. |
| onmouseout | script | Some script defined inside the onmouseout attribute runs when the mouse pointer moves out of some element. |
| onmouseover | script | A script defined inside the onmouseover attribute runs when the mouse pointer moves over some element. |
| onmouseup | script | While a user releases a mouse button on an element, a script defined in the onmouseup attribute triggers. |
| onmousewheel | script | When the mouse wheel scrolls over an element, a script triggers. |
| onwheel | script | Upon scrolling from an element up or down, a script triggers. |
6. Drag Event Attributes
The HTML event attributes that are related to Dragging of HTML elements are listed below.
| Attribute | Value | Description |
| ondrag | script | A script runs on the drag of an element. The script is defined using the ondrag attribute. |
| ondragend | script | A script runs after the drag of an element terminates. The script is defined using the ondragend attribute. |
| ondragenter | script | When a user drags an element to a valid drop target, a script in the ondragenter attribute runs. |
| ondragleave | script | When an element leaves a valid drop target, a script in the ondragleave attribute runs. |
| ondragover | script | If an element drags over a valid drop target, a script in the ondragover attribute runs. |
| ondragstart | script | A script runs after the drag of an element starts. The script is defined using the ondragstart attribute. |
| ondrop | script | On the drop of an element to a valid drop target, a script in ondrop attribute runs. |
| onscroll | script | When the scrollbar of an element is being scrolled, the script inside the onscroll attribute runs. |
7. Clipboard Event Attributes
The HTML event attributes that are related to the clipboard are listed below.
| Attribute | Value | Description |
| oncopy | script | If the user copies the content of an element, the script of the oncopy attribute runs. |
| oncut | script | If the user cuts the content of an element, the script of the oncut attribute runs. |
| onpaste | script | When the user pastes some content in an element, a script inside the onpaste attribute runs. |
8. Media Event Attributes
The HTML event attributes that are related to media elements like <video> or <audio> are listed below.
| Attribute | Value | Description |
| onabort | script | The script inside onabort attribute runs or abort media loading. |
| oncanplay | script | If a file is ready to play, the script runs as defined by the oncanplay attribute. |
| oncanplaythrough | script | If a file is ready to play until the end without pausing for buffering, the script runs as defined by the oncanplaythrough attribute. |
| ondurationchange | script | On change of the duration of the media, a script runs defined by the ondurationchange attribute. |
| onemptied | script | The script in the onemptied attribute triggers when the video or audio file becomes unavailable due to some error or fault. |
| onended | script | At the end of the video or audio, the script in onended attribute triggers. |
| onerror | script | A script triggers defined in onerror when some error occurs. |
| onloadeddata | script | A script loads defined in onloadeddata attribute after a media in video or audio element is finished loading. |
| onloadedmetadata | script | When metadata loading is finished like width, height, etc. The script defined inside the onloadedmetadata triggers. |
| onloadstart | script | Some script loads defined in the onloadstart attribute when an element starts loading. |
| onpause | script | When the video or the audio pauses by the user or for some other reason, the script inside the onpause attribute runs. |
| onplay | script | While the video or the audio starts playing, the script inside the onplay attribute runs. |
| onplaying | script | While the video or the audio has started playing, the script inside the onplaying attribute runs. |
| onprogress | script | When the browser is working to collect the media data, the onprogress attribute triggers the script. |
| onratechange | script | When the playback speed changes, a script inside onratechange runs each time. |
| onseeked | script | Some script runs when the user seeks a new position on the player for audio or video. |
| onseeking | script | A script runs when the user seeks a new position on the player for audio or video. |
| onstalled | script | While the browser is unable to fetch the resourced object due to some reason, a script runs defined by onstalled attribute. |
| onsuspend | script | When fetching of media is stopped due to some reason in between, a script runs using onsuspend attribute. |
| ontimeupdate | script | When a user fasts forward to a new position in the player, a script runs by ontimeupdate attribute. |
| onvolumechange | script | A script runs each time the volume of the script changes. |
| onwaiting | script | When a media pauses and chances of resuming, a script triggers. |
If you want to know more about the types of the HTML elements or the types of the attribute i.e semantic or non-semantic or presentational type HTML, just visit the following link.
Types of HTML Elements and Attributes