HTML Event Attributes

HTML event attributes work on certain actions users perform on browsers like a mouse click, keyboard key press, etc.

<button type="button" onclick="myEventFunction()">Click me</button>
<script>
function myEventFunction(){
alert("This is an alert on button click event.");
}
</script>

<button type="button" onclick="myEventFunction()">Click me</button>

function myEventFunction(){

alert("This is an alert on button click event.");

}

</script>

Output

It can be used with HTML elements with a script inside it to execute when users click or perform other events. Events get activated with these attributes when added to the HTML elements.

The value of the event attributes is the script-like programming language Javascript to execute actions users perform on the browser.

List of HTML Event Attributes

Below is the list of HTML event attributes:-

Window Event Attributes

The window events are executed when the event perform for the window object applied with the <body> tag. The window event attributes are given below:

Attribute Name	Description
onafterprint	It executes the script after the print of the document
onbeforeprint	It executes the script before the print of the document
onbeforeunload	It executes the script before the unloading of the document
onerror	It executes the script on the occurrence of the error.
onhashchange	It executes the script when there is a change in the anchor part of the URL on a web page.
onload	It executes the script when the web page is loaded completely.
onmessage	It executes the script on the occurrence of the message.
onoffline	It executes the script when the browser disconnects from the internet and starts working offline.
ononline	It executes the script when the browser connects to the internet and starts working online.
onpagehide	It executes the script when the user moves away from the current page or is hidden from the current page.
onpageshow	It executes the script when the user moved to a page or shows the page
onpopstate	It executes the script when the history of the current window is changed.
onresize	It executes the script on resizing or size changes of the window.
onstorage	It executes the script on the updation of the web storage.
onunload	It executes the script on the unload or close of the current window.

Form Event Attributes

The form HTML event attributes are triggered when the user performs certain actions on forms like submission, user input, etc. However, these attributes apply to other HTML elements also. But, these are commonly used in forms.

Attribute Name	Description
onblur	It executes the script when the form element loses focus.
onchange	It executes the script when the value of the element is changed.
oncontextmenu	It executes the script when the user opens the context menu with a right-click.
onfocus	It executes the script when the form element gets focused.
oninput	It executes the script when the user enters some value to the form element.
oninvalid	It executes the script when the form input element input values are invalid or empty.
onreset	It executes the script when the user clicks the reset button of the form.
onsearch	It executes the script when the user enters some input in the form search input field.
onselect	It executes the script when the user selects some text of the form element.
onsubmit	It executes the script when the user submits the form.

Keyboard Event Attributes

The keyboard event attributes are triggered when the users press or release the keys.

Attribute Name	Description
onkeydown	It executes the script when the user press down the key on the keyboard.
onkeypress	It executes the script when the user presses the key on the keyboard.
onkeyup	It executes the script when the user releases the pressed key on the keyboard.

Mouse Events

The mouse event attributes are triggered when the users perform a mouse click on elements.

Attribute Name	Description
onclick	It executes the script when the user mouse clicks on the element.
ondblclick	It executes the script when the user mouse double-click on the element.
onmousemove	It executes the script when the user moves the mouse pointer over an element.
onmouseout	It executes the script when the user moves the mouse pointer out of the element
onmouseover	It executes the script when the user moves the mouse pointer over the element.
onmouseup	It executes the script when the user releases the pressed mouse button over an element.
onmousedown	It executes the script when the user presses the mouse button on an element.
onwheel	It executes the script when the mouse wheel rolls up and down on the element.

Drag Events

The drag events occur when the users drag-n-drop the element to the drop target.

Attribute Name	Description
ondrag	It executes the script when the element is dragged into the document.
ondragend	It executes the script at the end of dragging the element.
ondragenter	It executes the script when the dragging element enters a valid drop target.
ondragleave	It executes the script when the dropped element leaves the valid drop target.
ondragstart	It executes the script at the start of the drag process of the element.
ondragover	It executes the script when the element drags over a valid drop target.
ondrop	It executes the script when the dragging element drops to a valid drop target.
onscroll	It executes the script when the scrollbar of the element is being scrolled.

Clipboard Event Attributes

The clipboard event attributes are triggered when they copy, cut, and paste the content of the document in the browser.

Attribute Name	Description
oncopy	It executes the script when the user copies the content of the element.
oncut	It executes the script when the user cuts the content of the element.
onpaste	It executes the script when the user pastes the content of the element.

Media Events

The media events are triggered when the users interact with the media elements on the browser like <audio>, <video>, <img>, <embed>, etc.

Attribute Name	Description
onabort	It executes the script on abort.
oncanplay	It executes the script when the media file is ready to start playing.
oncanplaythrough	It executes the script when the media file starts playing without buffering or pausing.
oncuechange	It executes the script when the cue of the <track> element is changed.
ondurationchange	It executes the script when the duration of the media file is changed.
onemptied	It executes the script when the media file is disconnected or unavailable for some reason.
onended	It executes the script when the media file reached the endpoint.
onerror	It executes the script when the media file gives some error on load.
onloadeddata	It executes the script when the media data is loaded.
onloadedmetadata	It executes the script when the metadata of the media is loaded.
onloadstart	It executes the script when the media file starts loading or it begins to load.
onpause	It executes the script when the media file playback is paused.
onplay	It executes the script when the media file is ready to start playing after it is paused.
onplaying	It executes the script when the media file starts loading or it begins to load.
onprogress	It executes the script when the browser is in the progress of getting the media data.
onratechange	It executes the script when the playback speed of the running media file is changed.
onseeked	It executes the script when the media seeks to the end and the seeking attribute is set to false.
onseeking	It executes the script when the media playback seeking is active and the seeking attribute is set to true.
onstalled	It executes the script when the browser is not able to fetch the data of the media file.
onsuspend	It executes the script when the media file data is stopped fetching for some reason.
ontimeupdate	It executes the script when the media is playback position or time is changed like fast forwarding the track.
onvolumenchange	It executes the script when the volume of playback media is changed or muted.
onwaiting	It executes the script when the media playback is paused and is waiting to load more data.

Misc Events

Attribute Name	Description
ontoggle	It executes the script when the user toggle (opens and close) the <deails> element.

HTML Tutorial