HTML event-attributes with Javascript actions

Working with HTML events bring liveliness, interactivity, and dynamic experiences into the browser when some actions have happened. So lets take a closer look at those options in HTML to know something more about their astounding functions for web programming.

If someone ask me to define events in HTML code and their practical importance, I would like to say that events always trigger some actions or reactions in a browser. This way events bring interactivity to the web page or web application in some desired ways. There are literally unlimited possibilities to make your project stand out greatly.

Today we deliberately need dynamic websites and web applications where users can interact with web pages or the interface of web applications – and get desired responses from them. In order to offer interactive UI elements and content you need to know the basics of these attributes and Javascript.

Some examples of when events occur:

When loading of HTML web page is finishing
When a window is changing, or using popups
When an HTML field is changing in forms
The most frequently, when an HTML button has been clicked by mouse or tapped on the mobile device
Interactions with any other hardware such as action-reactions with keyboard or touch pad
Actions on multimedia content like image, audio, video, etc.

Declaring Javascript actions for events

The standard ways to define events in the HTML documents is to follow a standard HTML code statement syntax the following way:

<tag_name event_name="code">

Example

1) You want to change the color of texts from normal black to red when someone hovers the mouse over it.

2) When the mouse is out or removed from the element, the text color should return to its original normal black color.

Here we will accomplish this using two events as “event_name”: One is named onmouseover and another is named onmouseout. We are defining these events on a normal paragraph tag so we have “tag_name” as <p> and “code” is this.style.color=’…’ so placing them in the code will look like:

<p onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">This is a changing color text. Try it!</p>

If we want to define event actions, we have many global event attributes that can add to the HTML elements. They can be classified according the above described types of various events. Therefore, let’s check them accordingly.

Events triggered for the window objects

onafterprint — run code after the document is printed
onbeforeprint — run before the document is printed
onbeforeunload — run before the document is unloaded
onerror — run when an error occur
onhaschange — run when the document has changed
onload — Fires after the page is finished loading
onmessage — run when the message is triggered
onoffline — run when the document goes offline
ononline — run when the document comes online
onpagehide — run when the window is hidden
onpageshow — run when the window becomes visible
onpopstate — run when the window’s history changes
onredo — run when the document performs a redo
onresize — Fires when the browser window is resized
onstorage — run when a Web Storage area is updated
onundo — run when the document performs an undo
onunload — Fires once a page has unloaded (or the browser window has been closed)

Events triggered for the forms/fields

onblur – Fires the moment that the element loses focus
onchange – Fires the moment when the value of the element is changed
oncontextmenu – run when a context menu is triggered
onfocus – Fires the moment when the element gets focus
onformchange – run when a form changes
onforminput – run when a form gets user input
oninput – run when an element gets user input
oninvalid – run when an element is invalid
onreset – Fires when the Reset button in a form is clicked
onselect – Fires after some text has been selected in an element
onsubmit – Fires when a form is submitted

Events triggered for mouse actions

onclick – Fires on a mouse click on the element
ondblclick – Fires on a mouse double-click on the element
ondrag – run when an element is dragged
ondragend – run at the end of a drag operation
ondragenter – run when an element has been dragged to a valid drop target
ondragleave – run when an element leaves a valid drop target
ondragover – run when an element is being dragged over a valid drop target
ondragstart – run at the start of a drag operation
ondrop – run when dragged element is being dropped
onmousedown – Fires when a mouse button is pressed down on an element
onmousemove – Fires when the mouse pointer moves over an element
onmouseout – Fires when the mouse pointer moves out of an element
onmouseover – Fires when the mouse pointer moves over an element
onmouseup – Fires when a mouse button is released over an element
onmousewheel – run when the mouse wheel is being rotated
onscroll – run when an element’s scrollbar is being scrolled

This shows you how to run Javascript based on certain events.

References & More Reading

Servage Magazine