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
7. Other Event Attributes
Tutorial on html !!!
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 | Attribute | Description |
|---|---|---|
| 1 | onafterprint | Executed when the document is printed.( New attribute in HTML5). |
| 2 | onbeforeprint | Executed before the document is printed.( New attribute in HTML5). |
| 3 | onbeforeunload | Executed when the document is about to get unloaded (when a user is about to quit the page before it is loaded). (New attribute in HTML5). |
| 4 | onblur | Executed when a window loses focus. |
| 5 | onerror | Executed when an error occurs when downloading the document.( New attribute in HTML5). |
| 6 | onhashchange | Executed when the anchor in URL of a web page is changed (anchor comes after #). (New attribute in HTML5). |
| 7 | onload | Executed when content of a web page is entirely loaded eg (images, CSS styles and scripts). |
| 8 | onmessage | Executed when a message is triggered.(New attribute in HTML5). |
| 9 | onoffline | Executed when the browser works offline.(New attribute in HTML5). |
| 10 | ononline | Executed when the browser works online.(New attribute in HTML5). |
| 11 | onpagehide | Executed when a user go away from the web page.(New attribute in HTML5). |
| 12 | onpageshow | Executed when a user navigates to a web page.(New attribute in HTML5). |
| 13 | onpopstate | Executed when the window’s history is changed.(New attribute in HTML5). |
| 14 | onredo | Executed when a “Redo” option is used ( the last action is reversed).(New attribute in HTML5). |
| 15 | onresize | Executed when a window is resized.(New attribute in HTML5). |
| 16 | onstorage | Executed when a web storage is updated.(New attribute in HTML5). |
| 17 | onundo | Executed when the last action is cancelled (“undo” command).(New attribute in HTML5). |
| 18 | onunload | Executed when a web page is unloaded (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 | Executed when a form element loses focus. |
| 2 | onchange | Executed when the value of the element is changed. |
| 3 | oncontextmenu | Executed when the context menu is shown.(New attribute in HTML5). |
| 4 | onfocus | Executed when an element gets focus. |
| 5 | oninput | Executed when an element gets user input.(New attribute in HTML5). |
| 6 | oninvalid | Executed if an input element is invalid.(New attribute in HTML5). |
| 7 | onreset | Executed when a form is reset (all controls within the form are set to their initial values).(New attribute in HTML5). |
| 8 | onsearch | Executed when the user writes something in a search field (for <input=”search”>). |
| 9 | onselect | Executed when some text is selected in an element. |
| 10 | onsubmit | Executed when a form is sent. |
3. Keyboard Event Attributes
Keyboard event occurs when a user interacts with the keyboard.
| Sno | Attribute | Description |
|---|---|---|
| 1 | onkeydown | Executed when the user is pressing any key on the keyboard. |
| 2 | onkeypress | Executed when the user has pressed a key on the keyboard. (doesn’t work with Alt, Ctrl, Shift, Esc, PrScr). |
| 3 | onkeyup | Executed when a pressed key is released. |
4. Mouse Event Attributes
Mouse event occurs when a user interacts with the mouse.
| Sno | Attribute | Description |
|---|---|---|
| 1 | onclick | Executed when a mouse-button is clicked. |
| 2 | ondblclick | Executed when a mouse-button is clicked twice. |
| 3 | ondrag | Executed when an element is being dragged.(New attribute in HTML5). |
| 4 | ondragend | Executed when an element has been dragged.(New attribute in HTML5). |
| 5 | ondragenter | Executed when a dragged element enters a valid drop target.(New attribute in HTML5). |
| 6 | ondragleave | Executed when a dragged element leaves a valid drop target.(New attribute in HTML5). |
| 7 | ondragover | Executed when a dragged element being dragged over a valid drops target (every few hundred milliseconds).(New attribute in HTML5) |
| 8 | ondragstart | Executed when the user starts dragging an element.(New attribute in HTML5). |
| 9 | ondrop | Executed when the user drops dragging an element.(New attribute in HTML5). |
| 10 | onmousedown | Executed when a mouse button is pressed. |
| 11 | onmousemove | Executed when the mouse pointer is moved onto the element. |
| 12 | onmouseout | Executed when the mouse pointer moves out of an element. |
| 13 | onmouseover | Executed when the mouse pointer is moved onto an element. |
| 14 | onmouseup | Executed when a mouse button is released. |
| 15 | onmousewheel | Executed when the mouse wheel rolls up or down over an element. Obsolete attribute (use onwheel attribute instead). |
| 16 | onscroll | Executed when an element’s scrollbar is being scrolled.(New attribute in HTML5). |
| 17 | onwheel | Executed when the mouse wheel rolls up or down over an element.(New attribute in HTML5). |
5. Clipboard Event Attributes
| Sno | Attribute | Description |
|---|---|---|
| 1 | oncopy | Executed when the content of an element is copied. |
| 2 | oncut | Executed when the content of an element is cut. |
| 3 | onpaste | Executed when the content of an element is pasted. |
6. Media Event Attributes
Media-files events occur in media elements, like video, image, audio etc.
| Sno | Attribute | Description |
|---|---|---|
| 1 | onabort | Executed when the loading of an audio/video is aborted.(New attribute in HTML5). |
| 2 | oncanplay | Executed when the file is ready to start playing (has buffered enough to start playing).(New attribute in HTML5). |
| 3 | oncanplaythrough | Executed when the file is ready to be played from start to end without stopping for buffering.(New attribute in HTML5). |
| 4 | oncuechange | Executed when the duration of the media is changed.(New attribute in HTML5). |
| 5 | onemptied | Executed when something happens and the file is unavailable (e.g., when the Internet connection is lost).(New attribute in HTML5). |
| 6 | onended | Executed when a media file reached the end.(New attribute in HTML5). |
| 7 | onerror | Executed when an error occurs when the file is being loaded.(New attribute in HTML5). |
| 8 | onloadeddata | Executed when media data is loaded.(New attribute in HTML5). |
| 9 | onloadedmetadata | Executed when metadata (size of media files, duration, etc. ) is loaded.(New attribute in HTML5). |
| 10 | onloadstart | Executed when the browser starts downloading media data.(New attribute in HTML5). |
| 11 | onpause | Executed when the mediafile is paused.(New attribute in HTML5). |
| 12 | onplay | Executed when the file is ready to start playing.(New attribute in HTML5). |
| 13 | onplaying | Executed when the file starts playing.(New attribute in HTML5). |
| 14 | onprogress | Executed when the browser is in process of getting media data.(New attribute in HTML5). |
| 15 | onratechange | Executed each time, when the playing mode is changed (e.g. user switches fast forward or slow motion mode).(New attribute in HTML5) |
| 16 | onseeked | Executed when the seeking attribute of the <audio> or <video> tags is set to false indicating that seeking has ended.(New attribute in HTML5). |
| 17 | onseeking | Executed when the seeking attribute of the <audio> or <video> tags is set to false indicating that seeking is active.(New attribute in HTML5). |
| 18 | onstalled | Executed when the browser cannot get media data for whatever reason.(New attribute in HTML5). |
| 19 | onsuspend | Executed when the browser has already started extracting media data, but the process was suspended before the data is completely loaded.(New attribute in HTML5). |
| 20 | ontimeupdate | Executed when the playing position is changed.(New attribute in HTML5). |
| 21 | onvolumechange | Executed each time when the volume is changed (includes setting the volume to “mute”).(New attribute in HTML5). |
| 22 | onwaiting | Executed when media file is suspended, but is about to resume (e.g., when the file is paused for buffering).(New attribute in HTML5). |
Tutorial on html !!!
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). |