WebDevelopersNotes logo

home-icon Home / JavaScript / JavaScript Online Help – Event Handlers 1

JavaScript Online Help – Event Handlers 1

JavaScript Online Help - Event Handlers 1

JavaScript is all about making web pages respond to actions or events. These events can be of two types depending on how they are generated. Actions such as mouse movements or mouse button clicks etc. are brought about by the user while others like page or image loading have lesser user involvement and take place as the document is loaded in the browser window.

Playing the interactivity game is not very difficult. Each object has its properties and methods placed at JavaScript’s disposal and modifying these properties through JavaScript brings your pages alive.

Take the example of a image rollover effect. The logic is quite simple. Whenever the mouse pointer passes over the image the event is captured with the onmouseover event handler that can then change the value of the src property associated with the image object to another URL. Thus, a new image (with a new URL) is loaded in place of the old one.

What are event handlers?

Event handlers are small JavaScript code placed inside an HTML tag. They help in handling (catching) events. Here is the code from session 1:

<A HREF="http://www.webdevelopersnotes.com" 
onmouseover="alert('Go back to Home Page')">
Home Page</A>

The onmouseover is an event handler associated with the link object. (As far as JavaScript is concerned, any thing placed between the <A> – </A> is a link object). The value of the event handler is a small JavaScript code. Whenever the mouse pointer is moved over the link, this event handler captures the action and instructs the browser to display an alert box.
Pass your mouse pointer over the link below to see how it works.

Home Page

Let’s look at another example:

<A HREF="http://www.webdevelopersnotes.com" 
onmouseover="window.status = ('Go back to Home Page')">
Home Page</A>

Home Page

Here the onmouseover event handler modifies the status property of the window object. It directs the browser to print Go back to Home Page on the status bar.

Note that in the first example, onmouseover calls the alert method while in the second it modifies a property value.

A final example before we proceed to the next session:

<A HREF="http://www.webdevelopersnotes.com" 
Home Page</A>

Home Page

This time, onmouseover changes the bgColor (background color) property of the document object and sets it to a light grey color.

Sponsored Links

Your comments
Star icon IMPORTANT Have a question / problem? Click here to ask an expert.

If it's on the Internet, it must be true.

Sponsored Links


How do I view a deleted web page?
Is there a way to view a deleted web page - one that is no longer available? Yes there is and the solution is quite simple. [more...]


The biographical Wikipedia pages get a huge boost in traffic the day the person dies. This is but natural because they would be featured in the news and web users would typically like to know more. But what is surprising is that nine out of ten pages of the online encyclopaedia that have received more than 1 million views in a day have been of celebrities on the day they died. [more...]

We use cookies to give you the best possible website experience. By using WebDevelopersNotes.com, you agree to our Privacy Policy