A Brief Look at JavaScript - Web Development and Design Foundations with XHTML - page 543

Table 14.1 Events and their descriptions

Event Description

click The user clicks an item. This could be an image, hypertext link, or button.

load The browser displays the Web page.

mouseover The mouse pointer hovers over an item. The mouse pointer does not have to rest on the object.

This could be a hypertext link, image, paragraph, or another object.

mouseout The mouse pointer is moved away from an item that it had previously hovered over.

submit The user clicks the submit button on a form.

unload The Web page unloads in the browser. This event occurs just before a new Web page loads.

When an event occurs, this can trigger some JavaScript code to execute. One widely
used technique is to detect the mouseover and mouseout events and swap images or dis-
play a menu.

We need to indicate which events will be acted upon and what will be done when an
event occurs. We can use an event handler to indicate which event to target. An event
handler is embedded in an XHTML tag as an attribute and indicates some JavaScript
code to execute when the event occurs. Event handlers use the event name prefixed by
“on.” Table 14.2 shows the event handlers that correspond to the events described in
Table 14.1. For example, the onload event is triggered when browser renders (“loads”)
a Web Page. When you move your mouse pointer over a text hyperlink, a mouseover
event occurs and is detected by the browser. If that hyperlink contains an onmouseover
event handler, the JavaScript code indicated by the event handler will be executed. This
code might pop up an alert message, display an image, or display a menu. Other event
handlers such as onclick and onmouseout can cause JavaScript code to be executed
when their corresponding event occurs.

Table 14.2 Events and event handlers

Event Event Handler

click

onclick

load

onload

mouseover

onmouseover

mouseout

onmouseout

submit

onsubmit

unload

onunload

FAQ

I've seen some code examples and sometimes the event handlers are
written in mixed case, like onClick , and sometimes they're written in
lower case, like onclick . What's the difference?

Using Transitional XHTML, event handlers can be written using mixed case, such as onClick
and onMouseout . Conformance to Strict XHTML conformance requires that event handlers
are written using all lowercase. To be safe, use all lowercase letters when coding event handlers
on a Web page.