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.

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:

onmessagescriptScript to be executed once the message is initiated.
onpagehidescriptscript that will be executed when a user leaves a page.
onpageshowscriptWhen a user visits a page, the script should be executed.
onstoragescriptImplicit the script whenever a Web Storage repository is modified.
onunloadscriptOccurs after a page has finished loading(or you closed your browser window)
onerrorscriptScript to be executed in the event of an error.
onhashchangescriptScript to execute when the anchor portion of a URL has been modified.
onafterprintscriptExecute the script once the printing of the document is done.
onbeforeunloadscriptOnce the document is set to be emptied, execute this script in Ref event attributes.
onbeforeprintscriptScript to be Executed Prior to Printing of the Document.
onpopstatescriptThe script to be executed whenever the window’s history is modified.
onresizescriptTriggered whenever the browser’s window is updated
onofflinescriptThe script to be executed whenever the browser work in the offline mode.
ononlinescriptScript should be executed when the browser begins to function online.
onloadscriptoccurs 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):

onfocusscriptTriggers when the element receives focus.
oninputscriptScript to be executed when an element receives user input.
onchangescriptTriggers the instance whenever the value of the element in Ref event attributes changes.
onsearchscriptWhen the user enters text into a search field (for <input=”search”>), this event is triggered.
onresetscriptWhenever the form’s Reset button is pushed, this event occurs.
onselectscriptTriggered when an element’s text has been chosen as it comes to Ref event attributes.
onsubmitscriptEvent that occurs upon form submission.
onblurscriptActivates as soon as the element’s emphasis shifts away from it.
oninvalidscriptExecute the script whenever an element is incorrect.
oncontextmenuscriptScript 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.

onkeypressscriptActivates whenever the user presses a button.
onkeyupscriptTakes effect whenever a user releases a button.
onkeydownscriptTriggered 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.

onmousewheelscriptDismissed. Replace it with the onwheel attribute.
onmouseupscriptReacts once the mouse button is released when over a target.
onmouseoutscriptActivates when the mouse cursor leaves an element.
onclickscriptClicking the element referenced by the Ref event attributes causes it to trigger.
onmouseoverscriptTriggered whenever the mouse is placed over an element in Ref event attributes.
ondblclickscriptTriggers with a double-click of the mouse on element.
onmousedownscriptWhenever a cursor button is clicked on an element, this function is called.
onwheelscriptEvent that occurs when the mouse wheel is rolled up or down over a given element.
onmousemovescriptWhenever 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.

ondragoverscriptScript to be executed if a dragged element is set to drop in a valid location.
ondragscriptExecute the script whenever an element is dragged.
ondragendscriptFinal script to be executed after a drag function.
ondragstartscriptScript should be executed before any dragging may occur in Ref event attributes.
ondropscriptThe script to be executed when an element is dropped after being dragged.
onscrollscriptWhenever an element’s scrollbar is scrolled, this script should execute.
ondragenterscriptWhen an item is dropped at a proper location, this script will be executed.
ondragleavescriptIf 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.

oncopyscriptWhenever a user copies an element’s content, it explodes.
oncutscriptActivates when a user performs a cut operation on a certain element.
onpastescriptTriggered 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.
oncanplaythroughscriptIf a file can be played through to the finish without stop for buffering, a script should be executed.
onabortscriptExecute the script upon abort.
oncanplayscriptscript that will be executed when a file is prepared to play(After it has sufficiently buffered to start)
oncuechangescriptScript that will be executed whenever there is a change in the cue in a <track> element.
ondurationchangescriptscript should be executed when the media’s duration changes.
onemptiedscriptScript should be executed when a negative event causes the file to become suddenly inaccessible(such as accidental shutdowns)
onendedscriptOnce the media is finished, execute the script(a beneficial occasion for saying things like “thanks for hearing”)
onerrorscriptScript that should be executed if the loading of the file encounters a problem.
onloadeddatascriptThis is a script to be executed once media data is loaded.
onloadedmetadatascriptAfter the meta data is loaded (dimensions and duration), execute the script.
onloadstartscriptBefore anything else is loaded, execute this script as soon as the file begins to load.
onstalledscriptIf the browser cannot retrieve the media data for any cause, execute this script.
onprogressscriptThe script will be executed when the browser is getting media data from the server.
onpausescriptWhenever the media is stopped either by hand or on its own, execute the script.
onplayscriptExecute this script when the media is able to begin playing.
onplayingscriptThe script should be executed once the media has begun running.
onseekingscriptExecute this script when the seek attribute is set to true, showing that seeking is in progress.
onsuspendscriptIn case retrieval of the media data is interrupted before it has been fully loaded, execute the script.
ontimeupdatescriptWhenever the playback position changes (when a user fast forwards to a different point), execute this script.
onvolumechangescriptEvery time the volume is changed, the script should be invoked (including setting the volume to be muted).
onwaitingscriptIn the case that the media has paused, but is intended to resume (such as buffering more data), this script should be executed.
onratechangescriptEach time the playback rate changes (such as when the user switches to slo-mo or quick-forward), the script should be executed.
onseekedscriptScript to be executed after the seeking attribute has been set to false meaning that seeking is no longer required.

Misc Events

ontogglescriptActivates 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.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *