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: https://www.webreference.com/dhtml/column3/capEvents.html