Dynamic Images: The Event Object | WebReference

Dynamic Images: The Event Object

Logo

The Event Object
the key to backward compatibility

Netscape Navigator 4 (it's good to be able to call it Navigator again) and Internet Explorer 4, have, in their respective versions of JavaScript, given us a powerful tool in the new event object.

Events, like clicking or moving the mouse, pressing a key on the keyboard or even resizing the window generate a new object that we can use to react as authors to the user's actions.

The similarities end here. Explorer calls this object event. Navigator generates it but we have to name it. The event object carries with it several properties. For your information, these are listed in a table on a separate page. We will concern ourselves in this column with a unique use for the event object: backward compatibility.

Event Capturing vs in-line Event Handlers

In previous browser versions, we could override link clicks by using the onClick event handler to redirect the result of the click or even to cancel the link click. More often than this, the onClick event handler in forms was used to delay submission of a form until a validation check occurred, or cancel the submission altogether if the validation failed.

To accomplish this we had to insert the event handler in our HTML tags. With Dynamic HTML, we can tell the browsers to capture all clicks or all mousedowns or both or more and redirect them to a function for our processing. Using the properties the event object lugs along with it, we can determine things like:

Therefore, if we append code that will only be read by 4th generation browsers, and this code captures the event and processes it, we can add dynamic features that will not be missed by non-dynamic users but may save server visits, bandwidth, time and add some WOW for dynamic users. This type of appendable Dynamic HTML code is not only backward-compatible with JavaScript-enabled browsers, but theoretically with every browser available including text-based ones, because we do not intervene in the original page!

In fact, the code we will create in this column can be appended by adding one line to the page as it is. In a catalog, generated by SSIs, all pages can have the code appended programatically.

Capturing the Event

In Explorer, capturing the event is just a matter of redirecting the event to a function:

    document.onclick = findIt

Notice that it is all lower case and we include just the function name, no parentheses.

In Navigator, we first have to define a capture:

    document.captureEvents(Event.CLICK)

and then redirect it:

    document.onclick = findIt

The capitalization must be as above. Most errors happen here. Since this column is not on the event object per se, we will not go into the details. Just know that to set up a capture for dynamic browsers and redirect the event (in this case, click) to a function for processing, we need only the following code:

    if (NS4) { document.captureEvents(Event.CLICK) } // given that browser variables set up as on next page document.onclick = findIt // both browser captures now activated

Discover the Event Object

That's it. Over the remainder of the column, we will be using various properties of the event object, and properties of objects that are created by these properties. To help you understand how we retrieve the information, we have added a popup utility in this page.

When the popup appears, you can drag it around the page so it won't get in your way. The IE drag is not as smooth as the NN drag, but we're working on it. The popup displays information about the click event for IE and the mousedown event for NN. (You'll understand why later) When it appears, all clicks on the page will be redirected so you can click anywhere including links and instead of the default action, the popup will be updated with information concerning that click/mousedown. Properties that we will use throughout the column are reflected here. Many do not mean anything now. Later when we discuss them, return to this page (second little red button) and see the popup again. It will help you understand our code.

Once you have finished experimenting with the popup, disable click capture by clicking on the close button in the popup. Then move on to the next page.

The images below are here for you to click on when in the popup, to see info about them. The HTML for their page inclusion follows. This is for your reference, and will be repeated on every page.

<A NAME="imBigGuy">
<IMG NAME="imZJup" SRC="jupiter.jpeg" WIDTH=80 HEIGHT=60 HSPACE=20 ALIGN=LEFT></A>

<A HREF="/3d/lesson17/">
<IMG NAME="imZFruit" SRC="3d.jpg" WIDTH=80 HEIGHT=60 HSPACE=20 ALIGN=LEFT BORDER=0></A>

<A HREF="/outlook/column5/">
<IMG NAME="imRich" SRC="richWig.gif" WIDTH=80 HEIGHT=60 HSPACE=20 BORDER=0></A>

The popup is cross-browser enabled. If you have access to both dynamic browsers, see the popup in the other browser, as well. Different properties will appear.

Click on this link TWICE to activate the popup: more computer pics

Had fun? Let's go on...


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: 08/27/97
Revised: 04/13/98

URL: http://www.webreference.com/dhtml/column3/capEvents.html