more JavaScript events

Image rollovers were the first time we saw the use of JavaScript events to cause changes on your web pages. But there are more possibilities here than this. It's time to clarify exactly what this technique is, discuss some things about events and how they work, and provide a list of all available events.

Alerts have not yet appeared on this site. I will mention them now, as they provide a useful illustration of the technicalities involved, and of the distinction between the most common events. These are onclick and the two we've already seen: onmouseover and its complement, onMouseOut.

If you want to be wound up, move your mouse pointer over here.

This is easy in JavaScript. The following code is all you need.

<a href = "#" onmouseover="alert('This is a bit of a pain'); return true;">here</a>

You can do the same thing with images, too: . All you have to do is replace the link text with an image.

And the same thing can be done with buttons: in this case you have to click on the button to get the alert.

To do this, you need to use the code shown below.

<form action="">
<input type="button" value="Click on Me!"
  onclick="alert('This is not so irritating, and could conceivably be useful'); return true" />
</form>

These various alerts used two different starting points: onclick and onmouseover. These are the "events". There are other event handlers you can use - for example, onfocus changes what happens when a user 'focuses' on an object: you can focus on something by clicking on it or by 'tabbing' (pressing the Tab key). Links and form elements (boxes and buttons) can include onfocus. The table below details the common JavaScript event handlers:

An event provokes an object (a rather confusing term in this case: not only is it not an "object" in the usual sense of the word, it's not even an "object" in the web design sense; that is, an image, horizontal rule, or anything like that). Without a complete understanding of JavaScript, the best thing to do is simply take note of the exact syntax of these objects, and re-use them in your own particular context when necessary; it is usually obvious which bits of the code you will need to replace. The alerts shown above were one object, and obviously it's the text within the brackets following "alert" that has to be changed. (Technically that's known as the object's argument; again a strange use of a word. An argument in the programming sense refers to a value taken by a function.)

Here's another object, from the page on rollover images:

<a href="#" onmouseover="document.baby.src='joe2.jpg';" onmouseout="document.baby.src='joe2bw.jpg';">
<img src="joe2bw.jpg" name="baby" alt="Rollover image demo /">
</a>

Now we can see that the variables are the images involved, and the name given to the image. Note, incidentally - and this is important - that although on several occasions I've shown you code including an event/object across two lines of the screen in order to avoid formatting problems, you should always ensure an event/object is typed in a continuous line of text. The most obvious example of this problem came on the page about opening new windows. It doesn't matter if in Notepad the line appears to "wrap"; just don't type a carriage return or any extraneous spaces in the line, and let the text editor break the line itself.

Here's a simpler object which has been used on some of the demonstration pages, where you can close a window by clicking on a link. The link looked like this - don't forget the empty brackets:

<a href="#" onclick='window.close()'>Close this window</a>

Use of the onunload event is how some web pages irritatingly bring up further windows when you're trying to move away from their page. It's a phenomenally annoying tactic and in my opinion counter-productive as anyone trying to do that is bugging people so much they will lose business, not gain it!

The onchange event is used on the form-based menu. You could conceivably use this and other form-related events to bring up "captions" to form elements as the user moves around the form; another example of creative use of combinations of techniques. For more fun and frolics with this kind of thing (my, we're full of it today), see the Changing Background Colours page (which will open in the second browser window).

Finally, you might want to alter the information shown in the status bar, at the bottom of the screen. The default state is to show there the URL of the destination page when the mouse is over a link. But this is not always satisfactory, particularly if the URL is obscure. Just for a change, the links at the bottom of this page have been changed by means of the event which follows (only one event shown for clarity). Try hovering your mouse over these links and see what happens on this page. I've also deliberately left out the onmouseout event, to suggest the effects of doing so.

All these events (with some imagination and thought about how to combine them with other techniques) can considerably add to both the style and the user-friendliness of your page. But as with everything else, don't use them gratuitously, especially alerts.

<a href="lesson8.html"
  onmouseover="window.status='Return to the menu for lesson 8 (JavaScript)';
  return true;">Back to the menu for lesson 8</a>

(To make these more sensible you should really add
onmouseout="window.status=' ';"
as well.)

Back to the top

Back to the menu for lesson 8