Introduction to HTML Events

HTML Event

Introduction to HTML Events

In a web page or a website created using the HTML script (HyperText Markup Language), every action performed by the user and the web tool itself is termed an HTML Event. The description contains six types of attributes for every Event: window event attribute, form event attribute, keyboard event attribute, mouse event attribute, media event attribute, and clipboard event attribute. Each of these event attributes will have specific dedicated attributes that are used to fetch the details of the HTML Event.

Different Type of HTML Events

There are many event attributes available in HTML5, which are classified primarily into 6 different types. These attributes work using JavaScript language.

Different Type of HTML Events
  •  Windows Event Attributes: This is provided for the action of the windows object. It works in body tag  <body>.
  •  Form Event Attributes: If the user performs some action in the form like input data, cancel, submit, then these event attributes works.
  •  Keyboard Event Attributes: This keyboard event attributes used for keyboard action and user interaction.
  •  Mouse Event Attributes: Mouse event attribute used for mouse action that is move, click, wheel, etc.
  •  Clipboard Event Attributes: This event attributes used for clipboard action: example, cut, copy, pest.
  •  Media Event Attributes: This event attribute works on media files like video etc.

Description of Event Attributes

Here is some explanation of event attributes which are given below in detail:

1. Windows Event Attributes

onafterprintThis script act, though, after the document printed.
onbeforeprintThis script act, though, before a document printed.
onbeforeunloadWhereas before the unloaded document, this Script works.
onerror In the document occurs the Error then this event executed.
onhashchange The anchor part of URL change in the document that time event executed.
onloadWhen the first Web page is loaded completely, then this event executed.
onmessageIn the document, the message that occurred at that time event executed.
onofflineIf the network connection is unavailable and the browser says offline, then the event executed.
ononlineWhen the network available in the browser, then the event executed.
onpagehideThis script act; if the user not working on a current webpage, a then-current page can be hidden.
onpageshowThis script act at that time the current webpage is load.
onpopstateThis script automatically works on the browser for a history state change.
onresizeThis script act when the browser of the window changes the size.
onstorageWhen users web storage updated, then the event executed.
onunloadThe user’s current web page is not loaded or the window is closed, then the event is executed.

2. Form Event Attributes

onblurSome form validation object loos the focus, then event fired.
onchangeThe value change in the form, then event fired.
onfocusIn the form <input>, <a> , <select> object has focus. Working on this object then event fired.
oninputThe user gives input of value in the form then this event fired.
oninvalidThe event works on when the element does not satisfy its predefined constraints.
onresetUser reset the form information, then event fired.
onsearchUsers search the required field, then event fired.
onselectThe user selects the text or text area in form, then event fired.
onsubmitThe user submits the form at the end then the event fired.

3. Keyboard Event Attributes

Attribute   Description
onkeydownUsing a keyboard, the user press the key down at that point event works
onkeypressUsing the keyboard, users press the key and display characters at that point event works.
onkeyupAfter the press, the key user releases the key then the event works.

4. Mouse Event Attributes

onclickThe user clicks the mouse on the button then an event occurred.
ondblclickUsers double click the mouse then the event occurred.
onmousedownThe user presses the mouse button on the element then the event occurred.
onmousemoveThe user moves the mouse pointer over the element then the event occurred.
onmouseoutThe user moves the mouse outside of the element then the event occurred.
onmouseover The user moves the mouse over the element then the event occurred.
onmouseupThe user released the mouse button then the event occurred.
onmousewheelUsing the mouse wheel user rolls the up and down on element then the event occurred.
onwheelUsing a mouse wheel user roll them up and down then the event occurred.

5. Clipboard Event Attributes

oncopyUsing mouse users to copy the content, then the event occurred.
oncutUsing a mouse, users cut the content then the event occurred.
onpasteUsing a mouse user, paste the content, then an event occurred.

6. Media Event Attributes

onabortWhen media files aborted for download and play again, then an event occurs.
oncanplayWhen any media file ready for play, then this trigger is fired.
oncanplaythroughMedia file ready to play without buffering and loading.
oncuechangeElement changes the cue of <track> then event fired.
ondurationchangeThe Media file changes the length of time then the trigger is fired.
onemptiedIf the Media file unavailable and come fatal error, then the trigger is fired.
onendedThe Media file comes on endpoint then the trigger is fired.
onerrorWhen an error occurred to get the media file, the trigger is fired
onloadeddataThe Media file loads the data then the trigger is fired.
onloadedmetadataThe Media file loads the metadata then the trigger is fired.
onloadstartThe Media file starts to load then the trigger is fired.
onpauseThe Media file paused to play again then the trigger is fired.
onplayMedia file ready to play, then trigger is fired.
onplayingThe Media file starts to play when the trigger is fired.
onprogressThis script act when the browser is working on connecting with the media data.
onratechangeIf the videos playback speed is changed, then the trigger is fired.
onseekedUsers completed moving; otherwise, skip the new position of video. this attribute set as false.
onseekingThe user wants to move; otherwise, skip the new position of the video. this attribute set as true.
onstalledWhen the browser suddenly stops to the connection of data, then the event works.
onsuspendWhen the web Browser on purpose does not get media data, then events work.
ontimeupdateWhen a user changes the video play position like forward and backward.
onvolumechangeTo change media volume low to high.
onwaitingIf the data load the information, current video stop with buffering then event works.


Html Events are an easy way to take action and interface between web browsers and users. Users can get the reaction of every action effortless. For example, cut and copy for the clipboard, move and click for mouse, buttons for form. Events make web applications real-time and make smart work systems.

Recommended Articles

This is a guide to HTML Events. Here we discuss the introduction and types of HTML events such as windows, form, keyboard and many more, along with the explanation of attributes in detail. You may also look at the following articles to learn more-

  1. Basic HTML Tags
  2. Advantages of HTML
  3. HTML Format Tags
  4. HTML Style Sheets

Leave a Comment

Your email address will not be published. Required fields are marked *