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" 
onmouseover="document.bgColor='#EEEECC'">
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.

Sponsored Links

Tips

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

Fact

Flash memory was invented by Dr. Fujio Masuoka when he was working at Toshiba. It was presented at the 1984 International Electron Devices Meeting (IEDM) and introduced commercially for the first time by IBM in 1988. [more...]

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