Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

HTML Event Attributes

Posted in HTML Tutorial
Updated on Sep 22, 2024
By Mari Selvan
👁️ 155 - Views
⏳ 4 mins
💬 1 Comment
HTML Event Attributes

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:

TagsDescription
onblurExecutes JavaScript code when a form element loses focus.
onchangeExecutes JavaScript code when the value of a form element is changed.
onfocusExecutes JavaScript code when a form element receives focus.
oninputExecutes JavaScript code when the value of a form element is being modified by the user.
oninvalidExecutes JavaScript code when an input field fails validation.
onresetExecutes JavaScript code when the form is reset.
onsearchExecutes JavaScript code when the user initiates a search within a search input field.
onselectExecutes JavaScript code when the user selects some text within an input field or a text area.
onsubmitExecutes 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:

TagsDescription
onkeydownExecutes JavaScript code when a key is pressed down.
onkeyupExecutes JavaScript code when a key is released.
onkeypressExecutes 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:

TagsDescription
onclickExecutes JavaScript code when the element is clicked with the primary mouse button.
oncontextmenuExecutes JavaScript code when the context menu (usually triggered by the right mouse button) is opened on the element.
ondblclickExecutes JavaScript code when the element is double-clicked with the primary mouse button.
onmousedownExecutes JavaScript code when the mouse button is pressed down on the element.
onmousemoveExecutes JavaScript code when the mouse pointer moves over the element.
onmouseoutExecutes JavaScript code when the mouse pointer leaves the element.
onmouseoverExecutes JavaScript code when the mouse pointer enters the element.
onmouseupExecutes JavaScript code when a mouse button is released while the pointer is over the element.
ontoggleExecutes JavaScript code when the state of a <details> element is toggled, typically through a click event.
onwheelExecutes 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:

TagsDescription
ondragstartExecutes JavaScript code when the user starts dragging an element.
ondragExecutes JavaScript code when the element is being dragged.
ondragenterExecutes JavaScript code when a dragged element enters a valid drop target.
ondragoverExecutes JavaScript code when a dragged element is being dragged over a valid drop target.
ondragleaveExecutes JavaScript code when a dragged element leaves a valid drop target.
ondropExecutes JavaScript code when a dragged element is dropped onto a valid drop target.
ondragendExecutes 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:

TagsDescription
oncopyExecutes JavaScript code when the user initiates a copy operation.
oncutExecutes JavaScript code when the user initiates a cut operation.
onpasteExecutes 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.

TagsDescription
onabortExecutes JavaScript code when the media loading is aborted.
oncanplayExecutes JavaScript code when the media can start playing.
oncanplaythroughExecutes JavaScript code when an HTML media element can be played through to the end without buffering.
oncuechangeExecutes JavaScript code when the active cues in a <track> element associated with a media element (such as <video> or <audio>) change.
ondurationchangeExecutes JavaScript code when the duration of a media element, such as <audio> or <video>, changes.
onemptiedExecutes JavaScript code when a media element, such as <audio> or <video>, is emptied, typically when the media source is reset or removed.
onendedExecutes JavaScript code when the media playback reaches the end.
onerrorExecutes JavaScript code when an error occurs during media loading or playback.
onloadeddataExecutes JavaScript code when the data for a media element, such as <audio> or <video>, is loaded and ready to be played.
onloadedmetadataExecutes JavaScript code when the metadata of the media is loaded.
onloadstartExecutes JavaScript code when the loading of a media element, such as <audio> or <video>, begins.
onpauseExecutes JavaScript code when the media playback is paused.
onplayExecutes JavaScript code when the media playback starts.
onplayingExecutes JavaScript code when a media element, such as <audio> or <video>, starts playing or resumes after being paused.
onprogressExecutes JavaScript code executed periodically while a resource, such as an <img> or <video> element, is being downloaded.
onratechangeExecutes JavaScript code when the playback rate of an HTML media element changes.
onseekedExecutes JavaScript code when the media playback position is changed using the seek operation.
onseekingExecutes JavaScript code when the seeking operation of an HTML media element begins.
onstalledExecutes JavaScript code when the loading of an HTML media element is interrupted or delayed.
onsuspendExecutes JavaScript code when the loading of an HTML media element is intentionally suspended or delayed.
ontimeupdateExecutes JavaScript code when the playback position of an HTML media element is updated during playback.
onvolumechangeExecutes JavaScript code when the volume of the media is changed.
onwaitingExecutes 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.

TagsDescription
onafterprintExecutes JavaScript code when the print dialog box is closed.
onbeforeprintExecutes JavaScript code when the print dialog box is opened or when the print preview is initiated.
onbeforeunloadExecutes 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.
onhashchangeExecutes JavaScript code when the URL fragment identifier changes.
onloadExecutes JavaScript code when a web page or a specific element has finished loading.
onmessageExecutes JavaScript code when a message is received from a different window or an iframe.
onofflineExecutes JavaScript code when the browser or device goes offline.
ononlineExecutes JavaScript code when the browser or device comes back online after being offline.
onpagehideExecutes JavaScript code when a web page is about to be hidden or unloaded.
onpageshowExecutes JavaScript code when a web page is shown or loaded.
onpopstateExecutes JavaScript code when the user navigates forward or backward through the browser history.
onresizeExecutes JavaScript code when the browser window is resized.
onunloadExecutes JavaScript code when a web page is about to be unloaded or the user navigates away from the page.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Mari Selvan
Mari Selvan
11 months ago

If you have any doubts regarding this article (HTML Event Attributes) please comment here. I will help you immediately.

We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy