Tutorials

HTML Event Attributes

Posted in HTML Tutorial

Updated on Sep 22, 2024

By Mari Selvan

👁️ 167 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🤔 What is HTML Event Attributes?

HTML event attributes are attributes that can be added to HTML elements to specify JavaScript code or functions that should be executed in response to specific events.

These event attributes allow you to define interactive behavior and dynamic functionality within your web page.

Here are some commonly used HTML event attributes:

Form Event Attributes

Form event attributes are specific attributes that can be used in HTML form elements to define JavaScript code or functions that should be executed when particular events occur within a form.

These attributes provide a way to add interactivity and validation to form elements.

Here are some commonly used form event attributes:

Tags	Description
onblur	Executes JavaScript code when a form element loses focus.
onchange	Executes JavaScript code when the value of a form element is changed.
onfocus	Executes JavaScript code when a form element receives focus.
oninput	Executes JavaScript code when the value of a form element is being modified by the user.
oninvalid	Executes JavaScript code when an input field fails validation.
onreset	Executes JavaScript code when the form is reset.
onsearch	Executes JavaScript code when the user initiates a search within a search input field.
onselect	Executes JavaScript code when the user selects some text within an input field or a text area.
onsubmit	Executes JavaScript code when a form is submitted.

Keyboard Event Attributes

Keyboard event attributes are specific attributes that can be used in HTML elements to define JavaScript code or functions that should be executed when specific keyboard events occur.

These attributes allow you to capture and respond to user interactions with the keyboard.

Here are some commonly used keyboard event attributes:

Tags	Description
onkeydown	Executes JavaScript code when a key is pressed down.
onkeyup	Executes JavaScript code when a key is released.
onkeypress	Executes JavaScript code when a key is pressed down and released.

Mouse Event Attributes

Mouse event attributes in HTML are attributes that can be added to HTML elements to define JavaScript code or functions that should be executed in response to specific mouse events.

These attributes allow you to capture and respond to user mouse interactions.

Here are some commonly used mouse event attributes:

Tags	Description
onclick	Executes JavaScript code when the element is clicked with the primary mouse button.
oncontextmenu	Executes JavaScript code when the context menu (usually triggered by the right mouse button) is opened on the element.
ondblclick	Executes JavaScript code when the element is double-clicked with the primary mouse button.
onmousedown	Executes JavaScript code when the mouse button is pressed down on the element.
onmousemove	Executes JavaScript code when the mouse pointer moves over the element.
onmouseout	Executes JavaScript code when the mouse pointer leaves the element.
onmouseover	Executes JavaScript code when the mouse pointer enters the element.
onmouseup	Executes JavaScript code when a mouse button is released while the pointer is over the element.
ontoggle	Executes JavaScript code when the state of a <details> element is toggled, typically through a click event.
onwheel	Executes JavaScript code when the user scrolls the mouse wheel over an element.

Drag Event Attributes

Drag events in web development refer to a set of JavaScript events that are triggered when an element is dragged by the user.

These events allow developers to perform certain actions or implement custom behaviors during the drag operation.

Here is a list of commonly used drag event attributes:

Tags	Description
ondragstart	Executes JavaScript code when the user starts dragging an element.
ondrag	Executes JavaScript code when the element is being dragged.
ondragenter	Executes JavaScript code when a dragged element enters a valid drop target.
ondragover	Executes JavaScript code when a dragged element is being dragged over a valid drop target.
ondragleave	Executes JavaScript code when a dragged element leaves a valid drop target.
ondrop	Executes JavaScript code when a dragged element is dropped onto a valid drop target.
ondragend	Executes JavaScript code when the drag operation is completed or canceled.

Clipboard Event Attributes

Clipboard events in web development are related to interacting with the clipboard, allowing you to monitor and manipulate the data being copied or pasted.

Here are some commonly used clipboard event attributes:

Tags	Description
oncopy	Executes JavaScript code when the user initiates a copy operation.
oncut	Executes JavaScript code when the user initiates a cut operation.
onpaste	Executes JavaScript code when the user initiates a paste operation.

Media Event Attributes

Media event attributes are HTML attributes that can be added to HTML media elements, such as

These events provide a way to interact with and control the behavior of media elements.

Tags	Description
onabort	Executes JavaScript code when the media loading is aborted.
oncanplay	Executes JavaScript code when the media can start playing.
oncanplaythrough	Executes JavaScript code when an HTML media element can be played through to the end without buffering.
oncuechange	Executes JavaScript code when the active cues in a <track> element associated with a media element (such as <video> or <audio>) change.
ondurationchange	Executes JavaScript code when the duration of a media element, such as <audio> or <video>, changes.
onemptied	Executes JavaScript code when a media element, such as <audio> or <video>, is emptied, typically when the media source is reset or removed.
onended	Executes JavaScript code when the media playback reaches the end.
onerror	Executes JavaScript code when an error occurs during media loading or playback.
onloadeddata	Executes JavaScript code when the data for a media element, such as <audio> or <video>, is loaded and ready to be played.
onloadedmetadata	Executes JavaScript code when the metadata of the media is loaded.
onloadstart	Executes JavaScript code when the loading of a media element, such as <audio> or <video>, begins.
onpause	Executes JavaScript code when the media playback is paused.
onplay	Executes JavaScript code when the media playback starts.
onplaying	Executes JavaScript code when a media element, such as <audio> or <video>, starts playing or resumes after being paused.
onprogress	Executes JavaScript code executed periodically while a resource, such as an <img> or <video> element, is being downloaded.
onratechange	Executes JavaScript code when the playback rate of an HTML media element changes.
onseeked	Executes JavaScript code when the media playback position is changed using the seek operation.
onseeking	Executes JavaScript code when the seeking operation of an HTML media element begins.
onstalled	Executes JavaScript code when the loading of an HTML media element is interrupted or delayed.
onsuspend	Executes JavaScript code when the loading of an HTML media element is intentionally suspended or delayed.
ontimeupdate	Executes JavaScript code when the playback position of an HTML media element is updated during playback.
onvolumechange	Executes JavaScript code when the volume of the media is changed.
onwaiting	Executes JavaScript when the playback of an HTML media element is waiting for more data.

Window Event Attributes

Window event attributes are HTML attributes that can be added to the <body> tag or used as event handlers in JavaScript to define functions that are executed when specific events occur on the window object or within the browser window.

These events are related to user interactions, changes in the window state, or the loading and unloading of resources.

Tags	Description
onafterprint	Executes JavaScript code when the print dialog box is closed.
onbeforeprint	Executes JavaScript code when the print dialog box is opened or when the print preview is initiated.
onbeforeunload	Executes JavaScript code when the user attempts to leave the page, and it allows you to show a confirmation dialog to ask the user for confirmation or provide a custom message before they leave.
onhashchange	Executes JavaScript code when the URL fragment identifier changes.
onload	Executes JavaScript code when a web page or a specific element has finished loading.
onmessage	Executes JavaScript code when a message is received from a different window or an iframe.
onoffline	Executes JavaScript code when the browser or device goes offline.
ononline	Executes JavaScript code when the browser or device comes back online after being offline.
onpagehide	Executes JavaScript code when a web page is about to be hidden or unloaded.
onpageshow	Executes JavaScript code when a web page is shown or loaded.
onpopstate	Executes JavaScript code when the user navigates forward or backward through the browser history.
onresize	Executes JavaScript code when the browser window is resized.
onunload	Executes JavaScript code when a web page is about to be unloaded or the user navigates away from the page.