HTML Ref Event Attributes

Ref Event Attributes – What are they?

This article discuses about Ref event attributes . Whenever a user clicks on an element, for example, a JavaScript can be launched in the browser because of an event that was activated in HTML.

You can come back to our forthcoming JavaScript tutorial afterwards to learn further about programming events.

The following is a list of global event attributes that may be assigned to elements of HTML in order to define event actions.

Table Of Content-

HTML Ref Event Attributes:
HTML Ref Event Attributes Advantages:

Ref Event Attributes Uses

Some common uses of Ref Event Attributes include:

Error handling: When an error occurs in your application, you can use Ref Event Attributes to retrieve information about the error, such as the error message, error code, and stack trace. This information can be used to diagnose and debug the issue.
Logging: Ref Event Attributes can be used to log information about events as they occur. This can include details such as the time the event occurred, the user who triggered the event, and any relevant data associated with the event.
Analytics: Ref Event Attributes can be used to capture data about events that occur in your application. This data can be used to analyze user behavior, identify patterns, and make data-driven decisions.
Event routing: Ref Event Attributes can be used to route events to specific destinations based on their attributes. For example, you might route events with a certain attribute to a specific function or service for processing.

Event Attributes of Window

Events which are launched for the window object (refers to the body <tag>) Here are some illustrations of Ref event attributes:

Attribute	Value	Overview
onmessage	script	Script to be executed once the message is initiated.
onpagehide	script	script that will be executed when a user leaves a page.
onpageshow	script	When a user visits a page, the script should be executed.
onstorage	script	Implicit the script whenever a Web Storage repository is modified.
onunload	script	Occurs after a page has finished loading(or you closed your browser window)
onerror	script	Script to be executed in the event of an error.
onhashchange	script	Script to execute when the anchor portion of a URL has been modified.
onafterprint	script	Execute the script once the printing of the document is done.
onbeforeunload	script	Once the document is set to be emptied, execute this script in *Ref event attributes*.
onbeforeprint	script	Script to be Executed Prior to Printing of the Document.
onpopstate	script	The script to be executed whenever the window’s history is modified.
onresize	script	Triggered whenever the browser’s window is updated
onoffline	script	The script to be executed whenever the browser work in the offline mode.
ononline	script	Script should be executed when the browser begins to function online.
onload	script	occurs after page load completion.

Form Events

Whenever we refer to Ref event attributes, Events generated by actions within an HTML form (applies to nearly all HTML elements, but is most commonly utilized in form elements):

Attribute	Value	Overview
onfocus	script	Triggers when the element receives focus.
oninput	script	Script to be executed when an element receives user input.
onchange	script	Triggers the instance whenever the value of the element in Ref event attributes changes.
onsearch	script	When the user enters text into a search field (for <input=”search”>), this event is triggered.
onreset	script	Whenever the form’s Reset button is pushed, this event occurs.
onselect	script	Triggered when an element’s text has been chosen as it comes to *Ref event attributes*.
onsubmit	script	Event that occurs upon form submission.
onblur	script	Activates as soon as the element’s emphasis shifts away from it.
oninvalid	script	Execute the script whenever an element is incorrect.
oncontextmenu	script	Script to be executed whenever a context menu is activated.

Keyboard Events

Keyboard events are a key component of interactivity on the web, allowing users to interact with web pages and applications through the use of their keyboards.

Attribute	Value	Overview
onkeypress	script	Activates whenever the user presses a button.
onkeyup	script	Takes effect whenever a user releases a button.
onkeydown	script	Triggered by a key press event.

Mouse Events

Mouse events are a crucial aspect of interactivity on the web, allowing users to interact with web pages and applications using a mouse or other pointing device.

Attribute	Value	Overview
onmousewheel	script	Dismissed. Replace it with the onwheel attribute.
onmouseup	script	Reacts once the mouse button is released when over a target.
onmouseout	script	Activates when the mouse cursor leaves an element.
onclick	script	Clicking the element referenced by the Ref event attributes causes it to trigger.
onmouseover	script	Triggered whenever the mouse is placed over an element in *Ref event attributes*.
ondblclick	script	Triggers with a double-click of the mouse on element.
onmousedown	script	Whenever a cursor button is clicked on an element, this function is called.
onwheel	script	Event that occurs when the mouse wheel is rolled up or down over a given element.
onmousemove	script	Whenever the mouse cursor is moved while over an element, this event is triggered.

Drag Events

Drag events are an important aspect of user interaction in many web applications, allowing users to drag and drop items or elements on a web page.

Attribute	Value	Overview
ondragover	script	Script to be executed if a dragged element is set to drop in a valid location.
ondrag	script	Execute the script whenever an element is dragged.
ondragend	script	Final script to be executed after a drag function.
ondragstart	script	Script should be executed before any dragging may occur in *Ref event attributes*.
ondrop	script	The script to be executed when an element is dropped after being dragged.
onscroll	script	Whenever an element’s scrollbar is scrolled, this script should execute.
ondragenter	script	When an item is dropped at a proper location, this script will be executed.
ondragleave	script	If an item drops out of a valid target, this script will be executed.

Clipboard Events

Clipboard events are an important aspect of user interaction in many web applications, allowing users to copy and paste content between web pages and other applications.

Attribute	Value	Overview
oncopy	script	Whenever a user copies an element’s content, it explodes.
oncut	script	Activates when a user performs a cut operation on a certain element.
onpaste	script	Triggered by the user’s action of pasting content into a target element.

Media Events

Media-related events, such as those caused by audio, video, and images (applicable to all HTML elements, but most frequently found in media elements like audio>, embed>, image>, object>, and video>) in Ref event attributes.

Tip : For further details, see our HTML Audio and Video DOM Reference.

Attribute	Value	Overview
oncanplaythrough	script	If a file can be played through to the finish without stop for buffering, a script should be executed.
onabort	script	Execute the script upon abort.
oncanplay	script	script that will be executed when a file is prepared to play(After it has sufficiently buffered to start)
oncuechange	script	Script that will be executed whenever there is a change in the cue in a <track> element.
ondurationchange	script	script should be executed when the media’s duration changes.
onemptied	script	Script should be executed when a negative event causes the file to become suddenly inaccessible(such as accidental shutdowns)
onended	script	Once the media is finished, execute the script(a beneficial occasion for saying things like “thanks for hearing”)
onerror	script	Script that should be executed if the loading of the file encounters a problem.
onloadeddata	script	This is a script to be executed once media data is loaded.
onloadedmetadata	script	After the meta data is loaded (dimensions and duration), execute the script.
onloadstart	script	Before anything else is loaded, execute this script as soon as the file begins to load.
onstalled	script	If the browser cannot retrieve the media data for any cause, execute this script.
onprogress	script	The script will be executed when the browser is getting media data from the server.
onpause	script	Whenever the media is stopped either by hand or on its own, execute the script.
onplay	script	Execute this script when the media is able to begin playing.
onplaying	script	The script should be executed once the media has begun running.
onseeking	script	Execute this script when the seek attribute is set to true, showing that seeking is in progress.
onsuspend	script	In case retrieval of the media data is interrupted before it has been fully loaded, execute the script.
ontimeupdate	script	Whenever the playback position changes (when a user fast forwards to a different point), execute this script.
onvolumechange	script	Every time the volume is changed, the script should be invoked (including setting the volume to be muted).
onwaiting	script	In the case that the media has paused, but is intended to resume (such as buffering more data), this script should be executed.
onratechange	script	Each time the playback rate changes (such as when the user switches to slo-mo or quick-forward), the script should be executed.
onseeked	script	Script to be executed after the seeking attribute has been set to false meaning that seeking is no longer required.

Misc Events

Attribute	Value	Overview
ontoggle	script	Activates as soon as the user opens or closes the <details> element.

HTML Ref Event Attributes Advantages

HTML Ref Event Attributes have various benefits that make them a useful tool for you. These advantages include:

Ease of Use : Ref event attributes simplify the process of adding interactivity to web pages, allowing developers to add event listeners to HTML elements without writing additional JavaScript code. This makes it faster and easier to create interactive features.
Clearer Code Structure : Ref event attributes help to organize code by keeping the event handling logic within the HTML element itself. This is particularly useful for larger web pages that have multiple event listeners, making it easier to understand and maintain the code.
Better Accessibility: By associating the event handling logic directly with the HTML element, ref event attributes improve the accessibility of web pages. This makes it easier for assistive technologies to identify and navigate interactive elements, benefiting users who rely on screen readers or other assistive technologies.
Faster Development Time: Ref event attributes can help to reduce development time by simplifying the process of adding interactivity to web pages. This allows you to focus on other aspects of the project, such as layout and design, without having to worry about complex event handling code.
Better Performance: Using ref event attributes to attach event listeners directly to the DOM element can lead to better performance on large web pages with many interactive elements. This is because it eliminates the need to use JavaScript to search for and attach event listeners, resulting in faster and more efficient code.

Do subscribe to our Newsletter below in order to be in touch with the latest technical information on this site.

We value your feedback.