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.

Tutorial Contents:

  1. Intro to HTML Event Attributes
  2. Window Event Attributes
  3. Form Event Attributes
  4. Keyboard Event Attributes
  5. Mouse Event Attributes
  6. Drag Event Attributes
  7. Clipboard Event Attributes
  8. Media Event Attributes

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.

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.

Form Event Attributes
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.

Keyboard Event Attributes
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.

Mouse Event Attributes
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.

Drag Event Attributes
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.

Clipboard Event Attributes
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.

Media Event Attributes
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
Give Us Your Feedback
OR
If You Need Any Help!
Contact Us