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.
Let’s look at another example:
<A HREF="http://www.webdevelopersnotes.com"
onmouseover="window.status = ('Go back to Home Page')">
Home Page</A>
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>
This time, onmouseover changes the bgColor (background color) property of the document object and sets it to a light grey color.
