ACOM: Web Design Tutorial Site

onClick and other events

We've already seen a few examples of the use of JavaScript events to cause changes on your web pages. The list of "related topics" to the top left gives a reasonable summary of the occasions. 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 "onX..." events. A discussion of what JavaScript actually is can be found on the page about the <SCRIPT> tag.

One application of these which hasn't yet appeared on this site is that of alerts. I'll mention these now, as they provide a useful illustration of the technicalities involved, and also of the distinction between the two most common events, onClick and onMouseOver (and its complement, onMouseOut).

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

This is very easy to do in JavaScript - the following code is all you need.

<a href = "#"
     onMouseOver="alert('This is where your text goes');return true;">
     the link text goes 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>

The three alerts above used two different starting points: onClick and onMouseover. These are the "events". There are other event handlers you can use, which will have predictable effects - 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 to cycle through options) on to it. You can cycle through links with the Tab key, for instance: or form buttons. The table below details the common event handlers in JavaScript:

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='madbaby2.jpg';"
               onMouseOut="document.baby.src='madbaby.jpg';">
    <IMG SRC="madbaby.jpg" name="baby"
        border="0" ALT="Rollover image demo">
</A>

As detailed on that page, here 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.

Still another object occurred at both the top and bottom of the Politics and the English Language page, when clicking on the link closes the window. The link looked like this:

    <A HREF="#" onClick='window.close()'>Close
          this window</A>

Don't forget the empty brackets. Use of the onUnload event, by the way, is the method through which 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 was 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 even 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 four links below, which occur at the bottom of every page on this site, 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.cfm"
    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 in onMouseOut="window.status=' ';" as well.)

Back to the top

Back to the menu for lesson 8