BACK

Part 4 - Events (Making it happen!)

Contents

What is an event? Responding to an event A full list of events Tricks JavaScript 1.2 events Changing things on pages .. And More

Introduction

1. A deep understanding of events;
2. Knowledge of how frames work.

What is an event?

onClick='GoThere(myform.yourName)'

You already know what an event is! What the above code does is to respond to an event - when the unsuspecting user clicks on the button, the function GoThere is used as an event handler. JavaScript recognises the event, and knows that she must invoke GoThere to do her dirty work. Such processing of events is an integral part of JavaScript, and really gives it its power!

Many, perhaps most JavaScript objects have associated events that can be identified and similarly 'hijacked'. There are events associated with links, images, forms, windows and even fancy things like image maps. Most JavaScript tutorials provide you with long lists of all the possible objects that can be associated with events, and then even longer lists of events for each object. We've chosen to do things the other way around, and concentrate on the events.

Responding to an event

Without further ado, here are the events you can intercept and use:

All the events (for version 1.0)!

And that's about that! (The onSelect seems to work inconsistently in Netscape). You'll find that you use the mouse events quite a lot, and the form event onChange fairly frequently too. Depending on what you're doing, you might also make good use of the onBlur and onFocus events too, or even some of the others. All in all, the list is not nearly as intimidating as one would expect!

Event Trickery

1. Remember when we explored window.status in part 3 of our tutorial? We said the following:

   <A HREF="err.htm" onClick="status='You clicked me';return false">

   meticulously returning a false value. Such obsession with falsehood is justified for all events. If you don't return true, the action associated with the click event is cancelled. You can see that you can prevent a click on a link from ever succeeding by simply inserting the following code into an anchor:

   onClick="return false"

   (You can then use the anchor for other purposes!)

   An even more devious amendment is the following:

   <A HREF="javascript:void(0)" onMouseOver="status='Go to Hell';">

   What does this do? It tells the browser that it must invoke javascript (one can do this sort of thing in an HREF), and the void(0) then says 'do nothing'! This sort of trickery prevents the link from ever being followed. aVoid it! The void() function is not guaranteed to exist in all JavaScript-enabled browsers. If you must use this sort of trickery then:

   1. First define a function called, say, aVoid() that does nothing!
   2. Don't put the javascript: instruction inside the href. Rather say something like:

      <A HREF="err.htm" onClick="this.href='aVoid()';status='Go to Hell';">

   3. You can even have an error page (err.htm) that says "Woops. JavaScript error" as a backup!

   Another option to prevent the HREF from going anywhere is to point the HREF to the current position (make an anchor) on the current page!

2. You may have noticed that, had you asked your browser to reload the previous page (part three of the tutorial), instead of the status bar displaying the friendly message:

   "Welcome to part THREE of our tutorial!"

   it might just have said "Done". This is the sort of thing you don't want - your browser wrote the message, and then overwrote it with its own bland pronouncement! We now have a way of detecting when the body of a document has finished loading - onLoad. Reload the current page, and see the message still lurking on the status bar.

3. Client-side image maps are fairly cute. (Remember that they will totally incapacitate a user whose browser isn't JavaScript enabled). The idea is that you set up an image, and respond to the coordinates of the user's click on the image. Some trickery is required. The tricks are:
   1. Create a <MAP>
   2. refer your image to the MAP
   3. define the clickable areas within the MAP, and the responses you want

   This is not as intimidating as it sounds. Here's a rough idea of how we do it:

   Creating a client-side image map

   <MAP name="jim"> <AREA coords="10,15,60,90" href="gohere.htm" onMouseOver="alert('Argh')"> <!-- YOU CAN HAVE MORE AREAS HERE--> </MAP> <img src="clicpic.gif" width="100" height="120"     alt="whatever" USEMAP="#jim">

4. Emulation can be exciting (in v 1.2 and above)! You'll find that generally where an event can be responded to, the object has an associated method that accurately EMULATES this event. For example, you can click on a button called, say, jane, but the button will also have a method jane.click() that, when invoked, will cause jane to "appear to be clicked by you"! Can you think of a use for this?

Another way of saying which function is going to respond to which event is:

        object.event = functionName

For example, let's say we want to trap all onClick events for a document, passing the event to our handler function Yeehah(). We could say: document.onClick = Yeehah

NOTE that we do NOT have parentheses after the function name. THIS IS IMPORTANT. It also only works in JavaScript 1.2 and above.

How do we then construct our "event-handling" function? Well, just as we would any other function, but we must remember that the function is passed an argument. Let's create a click event handler thus:

function Yeehah(ev)
  { var butn = ( (ev.which == 1) ? "left" : "right" ) ;
    alert ("You clicked at screen coordinates ("
            + ev.screenX + ","
            + ev.screenY + ") using the "
            +  butn + " mouse button!"
          );
  }

document.onClick=Yeehah ;

As an example, the above is pretty useless. There is however a whole variety of events that you can now (more or less) trap in JavaScript 1.2 - we won't discuss them here, but will defer this to part seven of our tutorial.

Changing things on Pages

(We will eventually get around to providing a detailed reference of which components can be altered in which browsers. For now, you'll just have to find this out for yourself).

And more..