What is an Event ?
Whatever thing that happens is an event.
What is an HTML event ?
Something happens in the browser is called as an HTML event.
When the browser loads or user submits a form its called HTML event.
In HTML5 there are lots of event attributes available which can executed with client-side scripting language such as JavaScript.
1. Windows Event Attributes
2. Form Event Attributes
3. Keyboard Event Attributes
4. Mouse Event Attributes
5. Clipboard Event Attributes
6. Media Event Attributes
HTML coding for a website !!!
Click to Learn More about – HTML Tutorial for beginners
1. Windows Event Attributes
Windows events are related to the window objects.
This can only be applied inside <body> tag.
| Sno | Attributes | Description |
1 | onafterprint | Executes the script after the document is printed. |
2 | onbeforeprint | Executes the script before the document is printed. |
3 | onbeforeunload | Executes the script before a document being unloaded. |
4 | onerror | Executes the script when an error occurs. |
5 | onhashchange | Executes the script when the anchor part in URL of the webpage is changed. |
6 | onload | Executes the script when the webpage is entirely loaded. |
7 | onmessage | Executes the script when a message event occurs. |
8 | onoffline | Executes the script when the network connection is disconnected, and browser started working offline. |
9 | ononline | Executes the script when the browser started working online |
10 | onpagehide | Executes the script when the current webpage is hidden such as if the user has moved away from the current webpage. |
11 | onpageshow | Executes the script when the current webpage is focused. |
12 | onpopstate | Executes the script when the window’s active history is changed. |
13 | onresize | Executes the script when the window is resized. |
14 | onstorage | Executes the script when web storage is updated. |
15 | onunload | Executes the script when the current webpage is unloaded, or window is closed. |
2. Form Event Attributes
Form event occurs when the user performs some action like submitting the form, selecting input field in the form.
Form events can be used with any HTML form elements.
| Sno | Attribute | Description |
1 | onblur | Executes the script when form element loses the focus. |
2 | onchange | Executes the script when the value of the element is changed. |
3 | onfocus | Triggers an event when the element gets focused. |
4 | oninput | Executes the script when the user enters input to the element. |
5 | oninvalid | Executes the script when the element does not satisfy its predefined constraints. |
6 | onreset | Triggers the event when user reset the form element values. |
7 | onsearch | Triggers the event when a search field receives some input. |
8 | onselect | Triggers the event when the user has selected some text. |
9 | onsubmit | Triggers the event when a form is submitted. |
3. Keyboard Event Attributes
Keyboard event occurs when a user interacts with the keyboard.
| Sno | Attribute | Description |
1 | onkeydown | Triggers the event when the user presses down a key on the keyboard. |
2 | onkeypress | Triggers the event when the user presses the key which displays some character. |
3 | onkeyup | Triggers the event when the user releases the currently pressed key. |
4. Mouse Event Attributes
Mouse event occurs when a user interacts with the mouse.
| Sno | Attribute | Description |
1 | onclick | Triggers the event when the mouse clicks on the element. |
2 | ondblclick | Triggers the event when mouse double-click occurs on the element. |
3 | onmousedown | Triggers the event when the mouse button is pressed on the element. |
4 | onmousemove | Triggers the event when the mouse pointer moves over the element. |
5 | onmouseout | Triggers the event when the mouse moves outside the element. |
6 | onmouseover | Triggers the event when the mouse moves onto the element. |
7 | onmouseup | Triggers the event when the mouse button is released. |
8 | onmousewheel | Deprecated. Use the onwheel attribute. |
9 | onwheel | Trigger the event when the mouse wheel rolls up or down on the element |
5. Clipboard Event Attributes
| Sno | Attribute | Description |
1 | oncopy | Triggers the event when the user copies the content to the system clipboard. |
2 | oncut | Triggers the event when the content of an element is cut and copy to the clipboard. |
3 | onpaste | Triggers the event when the user pastes some content in an element. |
6. Media Event Attributes
| Sno | Attribute | Description |
1 | onabort | Executes the script when media playback is aborted. |
2 | oncanplay | Executes the script when the media file is ready to play. |
3 | oncanplaythrough | Executes the script when the media file is ready to play without buffering or stopping. |
4 | oncuechange | Executes the script text cue of <track> element is changed. |
5 | ondurationchange | Executes the script when the media file duration is changed. |
6 | onemptied | Executes the script if media occurs some fatal error, and the file becomes unavailable. |
7 | onended | Executes the script when the media file occurs its end point. |
8 | onerror | Executes the script when some error occurred while fetching the media data. |
9 | onloadeddata | Executes the script when media data is loaded. |
10 | onloadedmetadata | Executes the script when metadata of media file is loaded. |
11 | onloadstart | Executes the script when loading of media file starts. |
12 | onpause | Executes the script when media playback is paused. |
13 | onplay | Executes the script when media file ready to play after being paused. |
14 | onplaying | Executes the script when media file is started playing. |
15 | onprogress | Executes the script when the browser is in the process of getting the media data. |
16 | onratechange | Executes the script when playback speed changed. |
17 | onseeked | Executes the script when seek operation is ended and seeking attribute is set to false. |
18 | onseeking | Executes the script when seek operation is active and seeking attribute is set to true. |
19 | onstalled | Executes the script when browser unexpectedly stopped fetching the data media. |
20 | onsuspend | Executes the script if fetching of media data is intentionally stopped. |
21 | ontimeupdate | Executes the script when playback position is changed, such as if a user fasts forward the track. |
22 | onvolumechange | Executes the script when media volume is changed (muted or unmuted). |
23 | onwaiting | Executes the script if playback pause to wait for loading more data. |
HTML coding for a website !!!
Click to Learn More about – HTML Tutorial for beginners
7.Other Events Attributes
| Sno | Attribute | Description |
1 | onerror | Executed when an error occurs when downloading external file. |
2 | onshow | Executed when the <menu> is shown as a context menu. New attribute in HTML5. |
3 | ontoggle | Executed when a user opens or closes the <details>. New attribute in HTML5. |
Awesome! Its truly amazing post, I have got much clear idea about from this piece of writing.
Thanks a lot for your love and support.
If the tutorial is good please share it to your friends.
Thanks.