HTML Event Attributes
HTML Event Attributes
In HTML, an event is something that-happen in the system. For example, user clicks an element (button, link, etc.) is an event, page load is an event, hovering an element is an event, and so.
In this section, we will list all event attributes available in HTML.
Form Event Attributes
The following table provides a list of all Form Event Attributes available in HTML.
| Attribute | Value | Explanation |
|---|---|---|
| onblur | script | Script runs when the element loses focus. |
| onchange | script | Script runs when the value of the element is changed and loses focus. |
| onfocus | script | Script runs when the element gets focus. |
| oninput | script | Script runs when an element gets user input. |
| oninvalid | script | Script runs when an element is invalid. |
| onreset | script | Script runs when the reset button in a form is click. |
| onsearch | script | Script runs when the user type something in a search field.i.e) <input type="search">. |
| onselect | script | Script runs when some text has been selected in an element. |
| onsubmit | script | Script runs when a form is submitted. |
Keyboard Event Attributes
The following table provides a list of all Keyboard Event Attributes available in HTML.
| Attribute | Value | Explanation |
|---|---|---|
| onkeydown | script | Script runs when a user is pressing a key. |
| onkeypress | script | Script runs when a user presses a key. |
| onkeyup | script | Script runs when a user releases a key. |
Mouse Event Attributes
The following table provides a list of all Mouse Event Attributes available in HTML.
| Attribute | Value | Explanation |
|---|---|---|
| onclick | script | Script runs when a mouse click on the element. |
| oncontextmenu | script | Script runs when the element is right clicked. |
| ondblclick | script | Script runs when a mouse is double-click on the element. |
| onmousedown | script | Script runs when a mouse button is pressed down on an element. |
| onmousemove | script | Script runs when the mouse pointer is moving while it is over an element. |
| onmouseout | script | Script runs when the mouse pointer moves out of an element. |
| onmouseover | script | Script runs when the mouse pointer moves over an element. |
| onmouseup | script | Script runs when a mouse button is released over an element. |
| ontoggle | script | Script runs when the user clicks the <details> element to open or close the content inside it. |
| onwheel | script | Script runs when the mouse wheel rolls up or down over an element. |
Drag Event Attributes
The following table provides a list of all Drag Event Attributes available in HTML.
| Attribute | Value | Explanation |
|---|---|---|
| ondrag | script | Script runs when an element is dragged. |
| ondragend | script | Script runs at the end of a drag operation. |
| ondragenter | script | Script runs when when an element has been dragged to a valid drop target. |
| ondragleave | script | Script runs when an element leaves a valid drop target. |
| ondragover | script | Script runs when an element is being dragged over a valid drop target. |
| ondragstart | script | Script runs at the start of a drag operation. |
| ondrop | script | Script runs when dragged element is being dropped. |
| onscroll | script | Script runs when an element's scrollbar is being scrolled. |
Clipboard Event Attributes
The following table provides a list of all Clipboard Event Attributes available in HTML.
| Attribute | Value | Explanation |
|---|---|---|
| oncopy | script | Script runs when the user copies the content of an element. |
| oncut | script | Script runs when the user cuts the content of an element. |
| onpaste | script | Script runs when the user paste some content in an element. |
Media Event Attributes
The following table provides a list of all Media Event Attributes available in HTML.
| Attribute | Value | Explanation |
|---|---|---|
| onabort | script | Script runs a media is aborted. |
| oncanplay | script | Script runs when a media is ready to start playing. |
| oncanplaythrough | script | Script runs when a file can be played all the way to the end without pausing for buffering. |
| oncuechange | script | Script runs when the cue changes in a <track> element. |
| ondurationchange | script | Script runs when the length of the media changes. |
| onemptied | script | Script runs when something bad happens and the file is suddenly unavailable. |
| onended | script | Script runs when the media has reach the end. |
| onerror | script | Script runs when an error occurs when the file is being loaded. |
| onloadeddata | script | Script runs when media data is loaded. |
| onloadedmetadata | script | Script runs when when meta data (duration, dimensions, etc) are loaded. |
| onloadstart | script | Script runs when the browser has started to load a media (resource). |
| onpause | script | Script runs when the media is paused. |
| onplay | script | Script runs when the media is ready to start playing. |
| onplaying | script | Script runs when the media actually has started playing. |
| onprogress | script | Script runs when the browser is in the process of getting the media data. |
| onratechange | script | Script runs when each time the playback rate changes(either forward or backward). |
| onseeked | script | Script runs when the current playback position of a video/audio has changed. |
| onseeking | script | Script runs when the audio/video is seeking a new position. |
| onstalled | script | Script runs when the browser is trying to fetch media data, but data is unexpectedly not forthcoming. |
| onsuspend | script | Script runs when fetching the media data is stopped before it is completely loaded. |
| ontimeupdate | script | Script runs when the time indicated by the currentTime attribute has been updated. |
| onvolumechange | script | Script runs when each time the volume of a video/audio has been changed. |
| onwaiting | script | Script runs when the video stops because of a temporary lack of data. |
Window Event Attributes
The following table provides a list of all Window Event Attributes available in HTML.
| Attribute | Value | Explanation |
|---|---|---|
| onafterprint | script | Script runs when a page has started printing, or the print preview has been closed. |
| onbeforeprint | script | Script runs when a page is about to be printed, or previewed for printing. |
| onbeforeunload | script | Script runs when the document is about to be unloaded. |
| onhashchange | script | Script runs when the current URL changes to target a specific section within the page. |
| onload | script | Script runs after the page is finished loading. |
| onmessage | script | Script runs when the message is triggered. |
| onoffline | script | Script runs when the browser starts to work offline. |
| ononline | script | Script runs when the browser starts to work online. |
| onpagehide | script | Script runs when a user navigates away from a page. |
| onpageshow | script | Script runs when a user navigates to a page. |
| onpopstate | script | Script runs when the window's history changes. |
| onresize | script | Script runs when the browser window has been resized. |
| onunload | script | Script runs when the document/page or a child resource is being unloaded. |
Reminder
Hi Developers, we almost covered 99.5% of HTML Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in HTML.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.