Many different types of event can occur on a Web page, most of them caused by the user. He or she might click on a button (click event), might move the mouse over an element (mouseover event), or move the mouse off an element (mouseout event). The user may submit a form (submit event) or resize the browser window (resize event). Additionally, some events occur without direct user intervention the page may finish loading (load event), for example.

The Document Object Model also defines types of events and their characteristics, such as to which elements they apply. More exactly, though, you manipulate and control events using JavaScript syntax. Once again, then, the handling of events is not exactly the same between Microsoft and Netscape browsers, at least until a standardized DOM comes along.

Managing events can be relatively simple or quite complex, depending on the ambitions of your project. Since this is an introduction, we'll focus mainly on event basics. Fortunately, basic events are handled most similarly between browsers.

Event Handlers

Events occur on a Web page whether you choose to act on them or not. When the user moves the mouse over an element, a mouseover event occurs. If you would like to leverage this event as a trigger for some dynamic action, you must construct an event handler.

An event handler is created as an attribute for the tag which defines the element at which you wish to catch the event. Event handler attribute named follow the syntax onEventname, and they accept JavaScript statements as their action. For example, the following tag creates a hyperlink with a mouseover event handler specified.

<A HREF="page.html"
   onMouseOver="changeStatus('Read this page');
   return true">
Click here
</A>

The onMouseOver event handler catches a mouseover event. When this event occurs at this element, a JavaScript function is called named changeStatus(). This is a fictional function, you can imagine that it might exist to change the message on the browser's status bar. Any JavaScript statement is allowed in an event handler, so we could also execute direct statement rather than call a function. For example, suppose that a mouseover for this element in Internet Explorer should modify a style sheet's color property:

<A	HREF="page.html"
	onMouseOver="document.styleSheets[0].rules[0].style.color='blue'"
	>
	Click here</A>

The above example assumes Internet Explorer, since style sheet modifications aren't supported in Netscape. We also assume that a style sheet exists in this document.

There are some important caveats to keep in mind.

Both browsers support additional events for detecting keypresses and other mouse actions, while Internet Explorer supports additional events above and beyond Netscape's. Secondly, you must keep in mind that not every event is applicable to every element. This also varies between browsers.
For example, within Netscape a mouseover event only applies to a hyperlink <A>, area <AREA> or layer <LAYER>. Yet, within Internet Explorer, you can apply a mouseover event to almost any element, including images <IMG>, and paragraphs <P>.

In general, the above rule holds between browsers: Netscape restricts each event to certain limited elements, while Internet Explorer allows most events to be handled at most elements.