Copy found at Wayback Machine Archive.
Event handling is pretty straight forward for all three impacted browsers (or browser object models). Events can be handled using two different techniques: through event handlers attached to HTML elements, or through event capturing. Navigator 4.x, IE, and Mozilla/Navigator 6.x all support both types of event handling, though the extent of coverage and the methods do differ.
Navigator 4.x only supports certain event handlers embedded within certain HTML tags — most notably this browser supports mouse event handlers such as onMouseOver and OnClick primarily within a link element (designated by <A;>). Additionally, Navigator 4.x also supports event capturing, using functionality similar to:
document.captureEvents(Event.KEYPRESS);
document.onKeyPress=keypress;
function keypress(e) {
tmp = e.which;
else if (navigator.appName == "Mozilla")
// if space bar hit
if (tmp == 32) {
window.close();
return;
}
}
Both IE and Mozilla/Netscape 6.0 support event handlers on HTML elements as defined within the HTML 4.0 specification, at the least. This means that you can associate an onMouseOver event handler with all HTML elements that support this — which means most if not all of them.
Additionally, IE and Mozilla/Netscape 6.0 also support event capturing though the techniques do differ. In IE, you can use SetCapture or ReleaseCapture with HTML elements, and all mouse movements are then passed to the element. You can also assign event handlers to objects in script:
document.onKeyPress=keypress;
With Mozilla/Netscape 6.0, event handling is provided through the DOM Level 2 Events. For instance, to provide event handling for an event, you can add an Event Listener for the object:
document.addEventListener("keyup",keypress,true);
The addEventListener method takes the event as the first parameter, the event handler (function) as the second, and whether the event is captured or allowed to “bubble up” to other events with the third parameter. In the code just shown, the keyup event is captured and assigned to a function called “keypress”.
Within an event handler, you can access an Event object, though how this is accessed and used also differs between the browsers.
With Navigator 4.x, the Event object is passed, automatically, as a parameter to the event handler. Within IE, the Event object is accessed through the Window object during event handling. Mozilla/Netscape 6.0 supports DOM Level 2 event handling. An Event object is passed to the event handler, and information can be pulled from it.
An example of event handling and pulling event information from an Event object is the following, which pulls information about which key is pressed:
function keypress(e) {
if (navigator.appName == "Microsoft Internet Explorer")
tmp = window.event.keyCode;
else if (navigator.appName == "Navigator")
tmp = e.which;
else if (navigator.appName == "Mozilla")
tmp = e.keyCode;
// if space bar hit
if (tmp == 32) {
window.close();
return;
}
}
In this code, if the space bar is hit (an ASCII value of 32), the current window is closed. The event handler itself is activated by the following code:
// capture events
if (navigator.appName == "Microsoft Internet Explorer")
wdth = document.body.clientWidth;
else if (navigator.appName == "Netscape")
document.captureEvents(Event.KEYPRESS);
else
document.addEventListener("keyup",keypress,true);
// assign function to event handler
if (navigator.appName != "Mozilla")
document.onkeypress=keypress;
Notice that the Mozilla/Netscape 6.0 code captures the keyup event, not the keypress. The reason for this is that the actual key value is set with a keyup or keydown event, but not with keypress. Capturing keypress will give me the ASCII value for the control keys, such as Enter or Tab, but not the other keys such as “N” or the space bar.
Now that we’ve had a brief introduction to X-Object event handling, we’ll take a look at some examples using different types of event handling.
Embedded Event Handlers
The simplest approach to event handling is to embed event handlers right in the HTML element. However, you also have to take into account that Navigator 4.x doesn’t support embedded events for the most part — if you want to capture events such as mouse events, you need to encapsulate the target element within a link.
To demonstrate, I modified a DHTML example application that uses a transparent GIF to embed “hot spots” in a page. When the mouse moves over the hot spot, the transparent image is replaced by a visible image.
Within the page, the transparent images are created within links, which are themselves encapsulated within positioned DIV blocks:
<DIV id=hotspot1> <a href="" onclick="return false" onmouseover="hotspot(0)"> <img src="blank.gif" width=80 height=32 border=0></a> </DIV>
When the mouse moves over the image, the hotspot function is called with the number of the spot. This function then replaces the existing transparent GIF with the visible one:
dfltimg = new Image();
dfltimg.src = "logo.gif";
// access images and changing their source
// is relatively old
function hotspot(num) {
if (navigator.appName == "Microsoft Internet Explorer" ||
navigator.appName == "Mozilla")
document.images[num].src = dfltimg.src;
else
document.layers[num].document.images[0].src = dfltimg.src;
}
As you might notice from the code, both IE and Mozilla/Netscape 6.0 can access the images array directly, regardless of what container HTML elements the images are in. With Navigator 4.x, however, you have to access the image object directly from the images collection for each document layer in the page.
Try out the HotSpot example yourself, using Mozilla/Netscape 6.0, IE 4.x and up, and Navigator 4.x. Expose the hotspots by moving your mouse over the page (there are 6 of them).
Finding an ASCII value
I have a utility DHTML application that prints the ASCII value of any key pressed to a form text box. I modified this utility to work with Mozilla as well as with Navigator 4.x and IE 4.x and up.
The application captures the keypress event (the keyup event for Mozilla), and attaches this event to an event handler function. The key capture and handling code is:
// handle keyboard events
if (navigator.appName == "Mozilla")
document.addEventListener("keyup",keypress,true);
else if (navigator.appName == "Netscape")
document.captureEvents(Event.KEYPRESS);
if (navigator.appName != "Mozilla")
document.onkeypress=keypress;
// perform action based on keypress and state info
function keypress(e) {
if (navigator.appName == "Microsoft Internet Explorer")
tmp = window.event.keyCode;
else if (navigator.appName == "Navigator")
tmp = e.which;
else if (navigator.appName == "Mozilla")
tmp = e.keyCode;
document.forms[0].elements[0].value = tmp;
}
You can try out the ASCII Utility yourself using Mozilla/Netscape 6.0, IE 4.x and up, and Navigator 4.x.
One thing you’ll find if you try this example with Mozilla/Netscape 6.0 is that the ASCII key value reflects the value of the key if it were capitalized. So, you get a value of “65” when you press an “A”, regardless of whether you’re pressing the shift key or not. I’m not sure if this is by design or by accident and am investigating this behavior. (Ahh, I do love working with alpha code).
Keep Away
I modified one more DHTML example that uses a combination of embedded event handlers and event capturing to create a “keep away” effect. The example uses an embedded event handler within a DIV block, which works with Mozilla/Netscape 6.0 and IE 4.x and up, but doesn’t with Navigator 4.x:
<DIV id="block" style="left: 200; top: 200; width: 104" onMouseover="keep_away()"> <img src="yasd.gif" width=104> </DIV>
To provide event handling for Navigator 4.x, the onMouseOver event for the DIV block is captured in script, and assigned to the same event handler:
:
function capture_events() {
// handle keyboard events
if (navigator.appName == "Netscape") {
document.block.captureEvents(Event.MOUSEOVER);
document.block.onmouseover=keep_away;
}
}
Within the event handling code itself, the CSS positioned DIV block (containing an image of L’il Flame) is moved either right or left, in effect keeping the image away from the user’s mouse:
MAXHORIZ = 700;
MINHORIZ = 100;
var adjustor = 0;
if (navigator.appName == "Navigator") {
adjustor = 50;
}
else
adjustor = 100;
function keep_away() {
var newleft = theobjs["block"].objGetLeft();
if (newleft > MAXHORIZ)
adjustor=-1 * adjustor;
else if (newleft < MINHORIZ)
adjustor= -1 * adjustor;
newleft= newleft+adjustor;
theobjs["block"].objSetLeft(newleft);
}
As spacing is a bit different between IE and Navigator, the original code provided a different adjustor value for moving the DIV block. I’ve found that the same settings also work with Mozilla. Try the Keep Away example yourself, using Mozilla/Netscape 6.0, IE 4.x and up, and Navigator 4.x. Move your mouse over L’il Flame to cause it to move away from your mouse.