Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

The Netscape Navigator Event Model

Netscape Navigator version 4 and higher adds support for several new classes of events, enabling you to create scripts that respond to a greater variety of user input. The new categories and events are as follows:

•  Mouse events—Added events for onMouseDown, onMouseUp, and onMouseMove

•  Keystroke events—Added events for onKeyDown, onKeyUp, and onKeyPress

•  Window events—Added events for onMove and onResize

In addition to the new events, Netscape has added a new event object that you can use to access information about the triggered events. This object is created whenever an event is being processed, and it has the following properties:

•  target—The name of the object to which the event belongs

•  type—The event type (for example, onMouseDown, onMouseUp, and so forth)

•  pageX—The mouse’s horizontal position relative to the HTML page

•  pageY—The mouse’s vertical position relative to the HTML page

•  screenX—The mouse’s horizontal position relative to the screen

•  screenY—The mouse’s vertical position relative to the screen

•  which—A number specifying the mouse button or ASCII value of the key that was pressed

The event object is used a little differently than other objects. It comes into being in response to an event and can then be passed to an event handler for that event, as in

<FORM NAME=“MyForm”>
<INPUT TYPE=“BUTTON” VALUE=“Hi!” NAME=“MyButton” onClick=“hello(event)”>
</FORM>

The event handler then takes the event object as a parameter and can access its properties to process the event, such as this:

<SCRIPT LANGUAGE=“JAVASCRIPT”>
function hello(MyEvent) {
   alert(“Hello ” + MyEvent.target.name);
}
</SCRIPT>

The Microsoft Internet Explorer Event Model

Microsoft’s new event model is similar to Netscape’s model in many respects and different in a few others. It includes most of the new events that Netscape has included, with the exception of the onMove and onResize events. It also creates an event object in response to events within the HTML document. Unfortunately, the event object itself and how it is used within a script are quite different from Netscape’s system.

Microsoft’s event model has a large number of properties for identifying the nature of the event and the state of the mouse and/or keyboard when the event was triggered. The properties that correspond to the properties of the Netscape event model shown previously are as follows:

•  srcElement—The name of the object to which the event belongs

•  reason—The event type (for example, onMouseDown, onMouseUp, and so forth

•  x—The mouse’s horizontal position relative to the HTML page

•  y—The mouse’s vertical position relative to the HTML page

•  screenX—The mouse’s horizontal position relative to the screen

•  screenY—The mouse’s vertical position relative to the screen

•  button—A number specifying the mouse button that was pressed

•  keyCode A number specifying the UNICODE value of the key that was pressed

The syntax used for the Microsoft event object differs from that used with Netscape. It also comes into being in response to an event, but you do not need to pass it to the event handler:

<FORM NAME=“MyForm”>
<INPUT TYPE=“BUTTON” VALUE=“Hi!” NAME=“MyButton” onClick=“hello()”>
</FORM>

The event handler can automatically access the properties of the event object, as in the following:

<SCRIPT LANGUAGE=“JAVASCRIPT”>
function hello() {
   alert(“Hello ” + event.srcElement.name);}
}
</SCRIPT>

Dynamic Fonts

The introduction of the FACE attribute of the <FONT> tag gave Web developers the capability to choose the font in which their content should be rendered, giving them much greater control over the final appearance of their documents. The advent of style sheets and the CSS standard—now supported by the two most popular Web browsers—add an even greater capability for you to specify the precise font, format, and position of everything on your Web page. Increasingly, the visual effects that you develop through HTML, without having to rely on large graphics or other types of plug-in content, are limited only by your imagination.

Unfortunately, one implicit assumption is made that might get you into trouble when using <FONT FACE> or style sheets: These techniques work only if your user has the desired font installed on his or her local system. Although this should not be a problem for the “standard” fonts installed with Windows 95, you may run into problems if you want to use less popular fonts, or when your documents are viewed on other computer platforms. Many of your carefully constructed documents and effects can be ruined if your page is rendered in fonts other than the desired ones.

Both Netscape and Microsoft have introduced solutions to this problem. It will come as no surprise to you that the two solutions are not compatible, but they each achieve the same effect—they enable fonts to be embedded and used within an HTML document in such a way that, when the document is served to a Web browser, the fonts can also be downloaded and used for that document. Of course, it takes time to download fonts, the same as with graphics and other hypertext media; font files tend to be not very large, and Web fonts can be designed to have only the characters you need. Both these technologies are new, but they offer you the capability to truly design Web pages that will appear to your user exactly as designed.