Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

HTML event-attributes with Javascript actions

Tuesday, October 21st, 2014 by Servage

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.

Event Attributes in HTML

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">


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’…’ so placing them in the code will look like:

<p onmouseover="'red'" onmouseout="'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

HTML event-attributes with Javascript actions, 3.8 out of 5 based on 4 ratings
Categories: Guides & Tutorials


You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.